我正在尝试用React Native中的KeyboardAvoidingView
组件创建一个粘性页脚。我已经非常接近完成这项任务了,但是当键盘出现时,页脚向上移动,同时高度缩小。
以下是键盘出现之前的外观:
这是键盘打开后的样子:
正如您所看到的,submit容器比没有键盘之前要小。
下面是我当前的代码:
render() {
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
<View style={{ flex: 1, }}>
<TextInput
placeholder="Username"
value={this.state.username}
style={Styles.textInput}
onChangeText={(username) => this.setState({ username })}
autoCorrect={false}
/>
<TextInput
style={Styles.textInput}
placeholder="Email"
value={this.state.email}
onChangeText={(email) => this.setState({ email })}
autoCorrect={false}
/>
</View>
<View style={{ height: 100, backgroundColor: 'blue' }}>
<Text>Submit</Text>
</View>
</KeyboardAvoidingView>
);
我哪里做错了?
6条答案
按热度按时间omjgkv6w1#
你使用的是React导航吗?这可能会受到React导航的标题的影响。标题的高度在不同的移动的屏幕大小上是不同的。你需要得到标题的高度并传递到keyboardVerticalOffset属性中。
yhived7q2#
我的应用程序使用
react-navigation
。所以杜班顺的答案我最终做了这里有一个问题https://github.com/react-navigation/react-navigation/issues/3971
krcsximq3#
偶然发现了相同的问题,无法使用KeyboardAvoidingView解决。但这里有一个很好的替代解决方案:
希望这能帮上忙...
ig9co6j14#
对我来说,有助于删除行为="填充"
代码如下所示〈键盘避免视图style = {{flex:1}}〉
bprjcwpo5#
尝试以下代码,将页脚放在滚动视图和keyboardAvoidingView的外层。
b5lpy0ml6#
尝试使用原生基础npm包,这是react原生checkout this native base docs可用的最佳UI解决方案
根据需要设置页眉和页脚,使content标记的行为类似于scrollview