KeyboardAvoidingView 不适用于 Expo答案

【问题标题】：KeyboardAvoidingView not working with ExpoKeyboardAvoidingView 不适用于 Expo
【发布时间】：2018-08-15 10:54:50
【问题描述】：

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

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

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

"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,
  },

【问题讨论】：

你解决过这个问题吗？我也遇到了这样的问题。 stackoverflow.com/questions/52112707/…
我希望下面的内容可以提供一些见解，如果有，请点赞。

标签： javascript reactjs react-native expo

【解决方案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

在撰写本文时出现了一个非常受欢迎的模块，每周下载量约为 30k。我与此模块无关，但它对我有用。

【讨论】：

【解决方案2】：

我在将 flex: 1 添加到 KeyboardAvoidingView 时遇到了同样的问题，解决了我的问题：

            <KeyboardAvoidingView style={{ flex: 1 }} behavior={"padding"} >

                <ScrollView >

                    <Card>

                        <CardItem header bordered>
                            <Text>Personal Information</Text>
                        </CardItem>

                        <CardItem bordered>

                            <Body>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Full Name</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Headline</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Location</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Email</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>
                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>
                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>

                            </Body>
                            
                        </CardItem>

                    </Card>

                    <ListItem>

                        <Left>
                            <Text>Make my Profile Public</Text>
                        </Left>

                        <Right>
                            <Switch value={this.state.publicProfileRadioValue}
                                onValueChange={(value) => this.setState({ publicProfileRadioValue: value })}
                            />
                        </Right>
                        
                    </ListItem>

                </ScrollView>

            </KeyboardAvoidingView>

【讨论】：

当你仔细观察时，你会看到@dhj 已经将 KeyboardAvoidingView 实现为 { flex: 1 }。
实际上不，只是忽略了所有答案，只是发现您与所要求的代码风格相同。

【解决方案3】：

我可以通过这个实现实现正确的行为：

移除了 KeyboardAvoidingView 组件。
将此添加到app.json 文件中：

     "android": {
      "softwareKeyboardLayoutMode": "pan"
    }

希望它也适用于你们！

【讨论】：

【解决方案4】：

将 minHeight 属性添加到根视图样式。

<KeyboardAvoidingView 
      behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
      style={styles.container}> 
        {//content } 
</KeyboardAvoidingView>



minHeight: Math.round(Dimensions.get('window').height),

不要忘记导入Dimensions form react native

import { Dimensions } from 'react-native';

【讨论】：

【解决方案5】：

对于在 Android 上进行测试时遇到此问题的任何其他人，请确保您希望避免使用键盘的元素也具有 flex: 1。

这行不通：

<KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style={{ flex: 1 }}
      >
   <TextInput style={{ height: 300 }} />
</KeyboardAvoidingView>

这将：

<KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style={{ flex: 1 }}
      >
   <TextInput style={{ flex: 1 }} />
</KeyboardAvoidingView>

如果没有 flex 1，目标元素将不会相应地调整其高度以避开键盘

【讨论】：