React Native ios键盘覆盖了位于屏幕底部的输入

gwo2fgha 于 2023-05-18 发布在 React

关注(0)|答案(5)|浏览(141)

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

来源：https://stackoverflow.com/questions/46318606/ios-keyboard-covers-the-input-which-is-located-in-the-bottom-of-the-screen

5条答案

按热度按时间

eqqqjvef1#

查看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>
  );

赞(0）回复(0）举报 2023-05-18

amrnrhlw2#

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

赞(0）回复(0）举报 2023-05-18

vjrehmav3#

以下是我的解决方案，适用于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
      },
});

赞(0）回复(0）举报 2023-05-18

guz6ccqo4#

解决方案当你使用ScrollView并且每次点击Input时它都会添加额外的填充：

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{flex: 1}>
   <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      
          ........
        
   </ScrollView>
</KeyboardAvoidingView>

赞(0）回复(0）举报 2023-05-18

w8f9ii695#

带填充的KeyboardAvoidingView隐藏了用于此用途的按钮如下代码

<KeyboardAvoidingView behavior={"height"} 
style={{flex: 1}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  
      ........
    
</ScrollView>
</KeyboardAvoidingView>

赞(0）回复(0）举报 2023-05-18

我来回答

React Native ios键盘覆盖了位于屏幕底部的输入

5条答案

相关问题

热门标签

最新问答