我在KeyboardAvoidingView上遇到问题,我有3个TextInput,当我想在最后一个上写东西时,这个东西被键盘隐藏了。

export default class App extends React.Component {
  render() {
    return (
      <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
        <KeyboardAvoidingView behavior='padding' enabled>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
        </KeyboardAvoidingView>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

最佳答案

使用keyboardVerticalOffset,以使textInput不会隐藏在键盘后面

<KeyboardAvoidingView
   style={{ flex: 1 }}
   behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
   keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}>



  以及对position:'absolute' View遇到麻烦的任何人
  继续按下键盘,将View放在里面
  KeyboardAvoidingView


    <KeyboardAvoidingView
       style={{ flex: 1 }}
       behavior={(Platform.OS === 'ios') ? "padding" : null} enabled>

      //content here


     <Button  title="Login" style={{position:'absolute', bottom:20}}/>

   </KeyboardAvoidingView>

09-18 19:36