react-native - React Native-带有粘性页脚的KeyboardAvoidingView

Question

我正在尝试使用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>
  );

我究竟做错了什么？

Answer 1

您是否正在使用 react 导航？这可能会受到react-navigation标题的影响。 header 的高度在不同的移动屏幕尺寸上有所不同。您需要获取 header 的高度并将其传递给keyboardVerticalOffset Prop 。

import { Header } from 'react-navigation';

 <KeyboardAvoidingView
  keyboardVerticalOffset = {Header.HEIGHT + 20}
  style = {{ flex: 1 }}
  behavior = "padding" >

  <ScrollView>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
  </ScrollView> 

</KeyboardAvoidingView>