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。如何解决这个问题?
5条答案
按热度按时间eqqqjvef1#
查看React Native Keyboard Avoiding View的文档。
它是一个组件,用于解决视图需要移动到虚拟键盘的常见问题。它可以根据键盘的位置自动调整其位置或底部填充。
How to make your React Native app respond gracefully when the keyboard pops up文章的示例
amrnrhlw2#
您可以使用这个库react-native-keyboard-aware-scroll-view,只是将其作为组件的容器
vjrehmav3#
以下是我的解决方案,适用于iOS和Android:
guz6ccqo4#
解决方案当你使用ScrollView并且每次点击Input时它都会添加额外的填充:
w8f9ii695#
带填充的KeyboardAvoidingView隐藏了用于此用途的按钮如下代码