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 Keyboard 避免视图。
是一个解决视图常见问题的组件 移开虚拟键盘。它可以自动 根据位置调整其位置或底部填充 键盘。
来自如何让你的 React Native 应用在键盘弹出时优雅响应文章中的示例
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>
);
您可以使用这个库react-native-keyboard-aware-scroll-view只需将其作为组件的容器
这是我的解决方案,适用于 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
},
});
带有填充的键盘避免视图隐藏了以下代码中用于此用途的按钮
<KeyboardAvoidingView behavior={"height"}
style={{flex: 1}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
........
</ScrollView>
</KeyboardAvoidingView>
对我有用:
在项目导航器中选择 info.plist
右键单击顶部的“信息属性列表”,选择“添加行”
从下拉列表中选择“启动屏幕界面文件基本名称”。
将类型设置为“String”。
我将“LaunchScreen”(不带引号)作为值。
当您使用 ScrollView 并且每次单击输入时都会添加额外的填充时的解决方案:
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{flex: 1}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
........
</ScrollView>
</KeyboardAvoidingView>