javascript - KeyboardAvoidingView无法与Expo一起使用(KeyboardAvoidingView not working with Expo)

Question

I cannot seem to get the keyboard to push the content up in my React-Native Expo app.

(我似乎无法在我的React-Native Expo应用程序中使用键盘来推送内容。)

I am testing this from the expo App by publishing it from my development machine.

(我正在通过从我的开发机器发布它来通过expo App测试它。)

Try as I might, nothing seems to push the view up when the keyboard comes into focus, is there a specific order of components, or some property I am missing;

(尽我所能尝试，当键盘对准焦点，组件的特定顺序或缺少的某些属性时，似乎没有什么可以推动视图向上移动；)

I have included the versions, the render block and the style blocks I think which are relevant.

(我已经包括了我认为相关的版本，渲染块和样式块。)

I am using the following versions (latest);

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

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

For the login page, the render code looks like the following;

(对于登录页面，呈现代码如下所示；)

 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>
    )
  }

These are the styles that are relevant;

(这些是相关的样式。)

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

  ask by dhj translate from so

Answer 1

I ultimately could not find a full solution to the above directly, but I did find a npm module called.

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

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

I then nested this inside a ScrollView and included the View and Form inside it.

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

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

The module can be found here;

(该模块可以在这里找到；)

react-native-keyboard-aware-scroll-view

(反应本地键盘感知滚动视图)

At the time of writing appears a very popular module with ~30k downloads a week.

(在撰写本文时，出现了一个非常受欢迎的模块，每周下载约30k。)

I have no affiliation to this module, but it works for me.

(我与该模块无关，但是对我有用。)