reactjs - KeyboardAvoidingView 在 native react 中用过多的填充来推高内容

Question

我无法让 KeyboardAvoidingView 正常工作。对于类似的屏幕，它工作得很顺利，但是，对于另一个屏幕，它会将内容在屏幕上推得太远，在两者之间添加过多的空间。有修复吗？

代码:

<KeyboardAvoidingView behavior="padding" style={styles.container}>
         {this.props.signNameErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
      <View style={styles.formContainer}>
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          autoCorrect={false}
          onChangeText={(full_name)=> this.setState({full_name})}
          value={this.state.fullname}
          placeholder="Enter Full Name"
          />
          {this.props.signEmailErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={(email)=> this.setState({email})}
          value={this.state.email}
          placeholder="Enter Email"
          keyboardType="email-address"
          />
           {this.props.signPwErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          autoCorrect={false}
          onChangeText={(password)=> this.setState({password})}
          secureTextEntry={this.state.togglePW}
          value={this.state.password}
          placeholder="Create Password (Min. 6 Char)"
          />
        <TouchableOpacity style={styles.buttonContainer} onPress={this.handleSignup}>
          <Text style={styles.buttonText}>SIGN UP</Text>
        </TouchableOpacity>
      </View >
      </KeyboardAvoidingView>

Answer 1

可以设置padding，甚至可以为android和ios设置

import {KeyboardAvoidingView,Platform,} from 'react-native';

<KeyboardAvoidingView 
  behavior='padding'
  keyboardVerticalOffset={
  Platform.select({
     ios: () => 0,
     android: () => 200
  })()
}>
   ...content...
</KeyboardAvoidingView>

只是一个例子，尝试一下并设置你喜欢的方式。填充也可以是负值，例如 -300。