javascript - KeyboardAvoidingView 不适用于 Expo

Question

在我的 React-Native Expo 应用程序中，我似乎无法使用键盘来推送内容。我正在通过从我的开发机器发布它来从 expo App 测试它。

尽我所能，当键盘进入焦点时，似乎没有任何东西可以插入 View ，是否有特定的组件顺序，或者我缺少的某些属性；我已经包含了我认为相关的版本、渲染 block 和样式 block 。

我正在使用以下版本(最新)；

"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",

对于登录页面，渲染代码如下所示；

 render() {
    return (
      <SafeAreaView style={styles.flexContainer}>
      <KeyboardAvoidingView
        style={styles.flexContainer}
        behavior="padding"
      >
        <Image style={styles.image} source={require('../../assets/images/backgroundWelcome.png')} role="presentation" />
        <View style={styles.container}>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Email' 
              style={styles.input} 
              onChangeText={(input) => this.setState({email: input})} 
              value={this.state.email} 
            />
          </View>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Password'
              style={styles.input}
              secureTextEntry={true}
              onChangeText={(input) => this.setState({password: input})}
              value={this.state.password} 
            />
          </View>

          <View style={styles.row}>
            <StyledButton callback={this.handleLogin} title='Log In'/>
          </View>

        </View>
      </KeyboardAvoidingView>
      </SafeAreaView>
    )
  }

这些是相关的样式；

  root: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  flexContainer: {
    flex: 1,
  },
  container: {
    paddingHorizontal: 40,
    paddingBottom: 22,
    alignItems: 'center',
    flex: -1
  },
  row: {
    flexDirection: 'row',
    marginVertical: 10,
  },

Answer 1

我最终无法直接找到上述问题的完整解决方案，但我确实找到了一个名为 npm 的模块。

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

然后我将其嵌套在 ScrollView 中，并在其中包含了 View 和 Form。

<ScrollView
<KeyboardAwareScrollView>
<View>
  <!-- stuff -->
<View
<KeyboardAwareScrollView>
<ScrollView>

模块可以在这里找到；

react-native-keyboard-aware-scroll-view

在撰写本文时，出现了一个非常受欢迎的模块，每周下载量约为 3 万次。我与这个模块没有任何关系，但它对我有用。