KeyboardAvoidingView 在本机反应中使用过多的填充来推高内容

Posted 2023-02-22

【中文标题】KeyboardAvoidingView 在本机反应中使用过多的填充来推高内容

【英文标题】：KeyboardAvoidingView is pushing up content with excessive padding in react native

【发布时间】：2017-10-30 17:23:21

【问题描述】：

我无法让 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>

【参考方案1】：

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

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

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

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

【讨论】：

@Brunaine 我按照你的代码进行操作，但最后我看到了更多的噱头