ios键盘覆盖位于屏幕底部的输入答案

【问题标题】：ios keyboard covers the input which is located in the bottom of the screenios键盘覆盖位于屏幕底部的输入
【发布时间】：2017-09-20 09:43:40
【问题描述】：

ios 键盘覆盖了位于屏幕底部的输入。如何解决这个问题？

这里是代码。

 <Content style={styles.content}>

            <Form>
              <Item style={{borderBottomColor:'#42e8f4'}}>
                <Icon active name='mail' style={{color: '#42e8f4'}} />
                <Input placeholder='Email'placeholderTextColor= '#42e8f4' style={{color:'#0dc49d'}}/>
              </Item>
              <Item style={{ borderBottomColor:'#42e8f4'}}>
                <Icon active name='lock' style={{color: '#42e8f4'}} />
                <Input secureTextEntry={true} placeholder='Password'placeholderTextColor= '#42e8f4' style={{color:'#42e8f4'}}/>
              </Item>
            </Form>
            <ListItem style={{borderBottomWidth:0,borderTopWidth:0,borderBottomColor:'#42e8f4'}}>
              <Button transparent onPress={() => this.props.navigation.navigate("Signup")}>
                <Text style={{color:'#42e8f4'}}>Create Account</Text>
              </Button>
            <Button transparent onPress={() => this.props.navigation.navigate("Forgetpass")}>
              <Text  style={{color:'#42e8f4'}}>Forget Password</Text>
            </Button>
            </ListItem>
            <Button full
              style={{backgroundColor:'#42e8f4'}}
              onPress={() => this.props.navigation.navigate("Welcome")}>
              <Text style={{color: '#FFF'}}>Sign In</Text>
            </Button>
          </Content>

const styles = {
  content:{
    position:'absolute',
    bottom:10,
    left:0,
    right:0
  },
}

我正在使用 Native-Base。如何解决这个问题？

【问题讨论】：

标签： react-native react-native-android react-native-ios native-base

【解决方案1】：

查看React Native Keyboard Avoiding View 的文档。

它是一个组件，用于解决视图的常见问题，需要远离虚拟键盘。它可以自动根据位置调整其位置或底部填充键盘。

How to make your React Native app respond gracefully when the keyboard pops up 文章中的示例

 return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <Image source={logo} style={styles.logo} />
      <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Username"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm Password"
        style={styles.input}
      />
      <View style={{ height: 60 }} />
    </KeyboardAvoidingView>
  );

【讨论】：

问题是我写的上面的代码是在图片里面的，图片就像是整个屏幕的容器。我必须在哪里集成上面的代码？我在图像之后添加了它，而应用程序在 2 分钟左右没有呈现并且没有任何错误消息。
@NewTechLover 我在您的问题中没有看到任何Image 组件。您应该包装您希望键盘避免的主要组件。在您的示例中，这应该是 Content 组件。
解决了 ios 谢谢。但是当我使用它时，很棒的 android 版本会受到这个解决方案的影响。我怎样才能只为 ios 指定这个？我正在使用 expo，因此每个平台都没有单独的文件夹。
查看 react-native 文档上的 Platform Specific Code。如果您认为该解决方案解决了您的主要问题，请考虑将其标记为已回答。
我检查过了，但没有任何信息如何忽略 Android 的 KeyboardAvoidingView

【解决方案2】：

您可以使用这个库 react-native-keyboard-aware-scroll-view 只需将其作为组件的容器

【讨论】：

【解决方案3】：

这是我的解决方案，适用于 ios 和 android：

return (
   <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : ""}
          style={styles.container}>
          ........
          // Your input fields
          ........
         </KeyboardAvoidingView>
   </ScrollView>
)

const styles = StyleSheet.create({
      container: {
         flex: 1
      },
});

【讨论】：