React Native - 带有粘滞页脚的 KeyboardAvoidingView答案

【问题标题】：React Native - KeyboardAvoidingView with Sticky FooterReact Native - 带有粘滞页脚的 KeyboardAvoidingView
【发布时间】：2017-12-12 21:57:26
【问题描述】：

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

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

这是键盘出现后的样子：

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

这是我当前的代码：

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

我做错了什么？

【问题讨论】：

您从未提及任何预期行为。你想发生什么？以您编写代码的方式，它正在做它应该做的事情。
我希望它向上推动页脚，而不是将其调整为小于键盘关闭时的大小@MichaelChengspan>
如果底部视图（蓝色）的高度只有30，它将被键盘隐藏@MichaelChengspan>

标签： react-native react-native-ios

【解决方案1】：

尝试使用原生基础 npm 包，它是可用于反应原生的最佳 UI 解决方案 checkout this native base docs

使用内容标签的行为类似于滚动视图，根据需要设置页眉和页脚

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <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}
        />
        </Content>
        <Footer style={{backgroundColor: 'blue' }}>
          <FooterTab>
            <Button full onPress={()=>console.log('submitted')}>
              <Text>Submit</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

【讨论】：

我尝试了解决方案，但页脚没有向上移动。您提供的链接没有提及有关此问题的任何内容。如果与问题无关，请不要在此处宣传您的产品。

【解决方案2】：

我的应用使用react-navigation。所以我最终做了Toh Ban Soon的回答

import { KeyboardAvoidingView } from 'react-native';
import { Constants } from 'expo';
import { Header } from 'react-navigation';

<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset = {Header.HEIGHT + Constants.statusBarHeight} style={[sharedStyles.container, {justifyContent: 'center'}]}>

... Input components...

</KeyboardAvoidingView>

这里有个问题https://github.com/react-navigation/react-navigation/issues/3971

【讨论】：

【解决方案3】：

你在使用 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>

【讨论】：

【解决方案4】：

偶然发现了同样的问题，但无法使用 KeyboardAvoidingView 解决它。但这里有一个很好的替代解决方案：

constructor() {
    super();
    this.state = {
        bottomHeight: 0
    }
}
componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

_keyboardDidShow(e) {
    this.setState({ bottomHeight: e.endCoordinates.height - 50 })
}

_keyboardDidHide() {
    this.setState({ bottomHeight: 0 })
}

render() {
    return (
        <View 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', position: 'absolute', left: 0, right: 0, bottom: this.state.bottomHeight }}>
                <Text>Submit</Text>
            </View>
        </View>

希望这会有所帮助...

【讨论】：

【解决方案5】：

试试下面的代码，把footer放在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>

【讨论】：