React Native - 带有粘性页脚的 KeyboardAvoidingView [英] React Native - KeyboardAvoidingView with Sticky Footer

问题描述

我正在尝试使用 React Native 中的 KeyboardAvoidingView 组件制作粘性页脚.我非常接近完成这项任务，但是，当键盘出现时，页脚向上移动但同时高度缩小.

I'm trying to make a sticky footer with the KeyboardAvoidingView component in React Native. I'm very close to accomplishing this task, however, when they keyboard comes up, the footer is moving up but shrinking in height at the same time.

这是键盘出现之前的样子:

Here's what it looks like before the keyboard comes up:

这是键盘出现后的样子:

And here's what it looks like after the keyboard comes up:

如您所见，提交容器比没有键盘之前要小.

As you can see, the submit container is smaller than it is before there is a keyboard.

这是我当前的代码:

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>
  );

我做错了什么?

推荐答案

你在使用 react-navigation 吗?这可能会受到 react-navigation 标题的影响.标题的高度因不同的手机屏幕尺寸而异.您需要获取标题的高度并传入keyboardVerticalOffset 道具.

Are you using react-navigation? This might be affected by the header of the react-navigation. The height of the header is vary on different mobile screen size. You need to get the get the height of the header and pass into the keyboardVerticalOffset props.

import { Header } from 'react-navigation';

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

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

</KeyboardAvoidingView>

这篇关于React Native - 带有粘性页脚的 KeyboardAvoidingView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！