Question

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

我做错了什么？

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

偶然发现同一问题，并且无法使用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>

希望这对您有帮助...

Answer 3

我的应用使用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

有一个问题

Answer 4

尝试使用本机基本npm软件包，它是可用于响应本机checkout this native base docs的最佳UI解决方案

根据需要设置内容标签的页眉和页脚，就像滚动视图一样

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

Answer 5

尝试以下代码，将页脚放在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>

React Native - 使用Sticky Footer的KeyboardAvoidingView

5 个答案: