React Native：如何缩小两个React-Native-Elements组件间的边距

Hey there! Let’s tackle these two layout problems you’re dealing with—they’re super common in React Native, so I’ve got some straightforward fixes to share.

1. Narrowing the Gap Between Email & Password Fields #

Chances are, either the parent container holding your input fields has extra padding/margin, or each input component is adding more spacing than you need. Here’s how to fix it:

Quick Checks & Fixes: #

• Check parent container styles: If you’re using a View to wrap your inputs, look for gap, paddingBottom, or marginBottom values that might be pushing the fields apart. Lower the gap value (if using Flexbox) to something smaller like 8 or 10 instead of 16+.
• Override input component margins: If you’re using a custom input or a third-party UI library (like React Native Paper), the input might have a default marginBottom set. Override this in your styles.

Example Code: #

import { StyleSheet, View, TextInput } from 'react-native';

// Your login component
export default function LoginScreen() {
  return (
    <View style={styles.container}>
      {/* Logo goes here */}
      <View style={styles.inputWrapper}>
        <TextInput
          placeholder="Email"
          style={styles.inputField}
          keyboardType="email-address"
        />
        <TextInput
          placeholder="Password"
          style={styles.inputField}
          secureTextEntry
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  inputWrapper: {
    gap: 8, // This controls the space between inputs—adjust to your preference
  },
  inputField: {
    height: 52,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    // Remove or reduce any default marginBottom here
    marginBottom: 0, // Override if your input had a default margin
  },
});

If you’re not using gap (for older React Native versions), you can set marginBottom: 8 on the email input instead—just make sure the password input doesn’t have extra margin on top.

2. Preventing the Logo from Being Covered by the Keyboard #

When the keyboard pops up, it can push content up or cover it depending on your layout. The best fix here is using React Native’s built-in KeyboardAvoidingView along with a ScrollView to ensure content stays visible.

Step-by-Step Fix: #

1. Wrap your entire screen content in KeyboardAvoidingView—it adjusts the layout when the keyboard appears.
2. Use ScrollView inside it so users can scroll if needed, and set contentContainerStyle={{ flexGrow: 1 }} to keep your layout centered.
3. Adjust the behavior and keyboardVerticalOffset props to match your platform (iOS vs Android).

Example Code: #

import { StyleSheet, View, TextInput, Image, KeyboardAvoidingView, ScrollView, Platform } from 'react-native';

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      // Use 'padding' for iOS, 'height' for Android
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      // Offset to account for status bar/navigation bar height
      keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
    >
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
        showsVerticalScrollIndicator={false}
      >
        {/* Logo section - stays at the top/center without being covered */}
        <View style={styles.logoContainer}>
          <Image
            source={require('./assets/your-logo.png')}
            style={styles.logo}
            resizeMode="contain"
          />
        </View>

        {/* Input fields */}
        <View style={styles.inputWrapper}>
          <TextInput
            placeholder="Email"
            style={styles.inputField}
            keyboardType="email-address"
          />
          <TextInput
            placeholder="Password"
            style={styles.inputField}
            secureTextEntry
          />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  logoContainer: {
    alignItems: 'center',
    marginBottom: 40, // Space between logo and inputs
  },
  logo: {
    width: 120,
    height: 120,
  },
  inputWrapper: {
    paddingHorizontal: 20,
    gap: 8,
  },
  inputField: {
    height: 52,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
  },
});

Extra Tips: #

• If you’re using a navigation library like React Navigation, the keyboardVerticalOffset might need to be adjusted to match your header height (e.g., 96 instead of 64).
• For more advanced cases, you can use the Keyboard API to listen for keyboard events and adjust styles manually, but KeyboardAvoidingView should cover most basic scenarios.

内容的提问来源于stack exchange，提问作者crispengari