React Native-带有粘性页脚的KeyboardAvoidingView

Question

我正在尝试KeyboardAvoidingView在React Native 的组件中添加页脚。我非常接近完成这项任务，但是，当他们抬起键盘时，页脚会上升，但高度会同时缩小。

这是键盘启动前的样子：

这是键盘启动后的样子：

如您所见，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-navigation标题的影响。标头的高度在不同的移动屏幕尺寸上有所不同。您需要获取标头的高度并将其传递给keyboardVerticalOffset道具。

import { Header } from 'react-navigation';

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

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

</KeyboardAvoidingView>

Answer 2

尝试以下代码，将页脚放在scrollview和keyboardAvoidingView的外层。

<ScrollView padder scrollEnabled={true}>
  <KeyboardAvoidingView
     behavior="padding"
     keyboardVerticalOffset={70}
  >
   <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>
 </KeyboardAvoidingView>
</ScrollView>
<View style={{ height: 100, backgroundColor: 'blue' }}>
  <Text>Submit</Text>
</View>