javascript - KeyboardAvoidingView "Padding"无法正常工作

Question

我遇到了 KeyboardAvoidingView 的问题，我有 3 个 TextInput，当我想在最后一个 TextInput 上写东西时，这个 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'
  }
})

Answer 1

使用keyboardVerticalOffset，这样textInput就不会隐藏在键盘后面

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

And to anyone who is having trouble with a position:'absolute' View keep being pushed by the keyboard, put the View inside KeyboardAvoidingView

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

      //content here


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

   </KeyboardAvoidingView>