Question

我在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'
  }
})

Answer 1

我正在使用 react-native-keyboard-aware-scroll-view 。

这可能会起作用：

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView enableOnAndroid extraScrollHeight={pixels[50]}>
   <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
    </LinearGradient>
</KeyboardAwareScrollView>

Answer 2

通常，在Android上，不提供任何行为道具，您的预期结果会更好。而在iOS上，填充可能是正确的答案。请参阅https://facebook.github.io/react-native/docs/keyboardavoidingview#behavior

上的注释

我通常会这样写：

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
    // ...
</KeyboardAvoidingView>

Answer 3

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

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

Answer 4

我使用@Emma的答案，但使用result(float 32 exr [1,512,512,3])固定了偏移量。我用不到一个。

keyboardVerticalOffset

我将60赋予ios的VerticalOffset并进行了测试，因为它完全适合包含<KeyboardAvoidingView style={styles.keyboardAvoidContainer} enabled behavior={"padding"} // you can change that by using Platform keyboardVerticalOffset={Platform.select({ ios: 60, android: 78 })} >的多个模拟器。然后在Android Nexus模拟器中，其值为78。

KeyboardAvoidingView“填充”无法正常工作

4 个答案: