React Native -键盘避免带有粘滞页脚的视图

oyxsuwqo  于 2022-12-24  发布在  React
关注(0)|答案(6)|浏览(196)

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

我哪里做错了?

omjgkv6w

omjgkv6w1#

你使用的是React导航吗?这可能会受到React导航的标题的影响。标题的高度在不同的移动的屏幕大小上是不同的。你需要得到标题的高度并传递到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>
yhived7q

yhived7q2#

我的应用程序使用react-navigation。所以杜班顺的答案我最终做了

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

krcsximq

krcsximq3#

偶然发现了相同的问题,无法使用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>

希望这能帮上忙...

ig9co6j1

ig9co6j14#

对我来说,有助于删除行为="填充"
代码如下所示〈键盘避免视图style = {{flex:1}}〉

bprjcwpo

bprjcwpo5#

尝试以下代码,将页脚放在滚动视图和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>
b5lpy0ml

b5lpy0ml6#

尝试使用原生基础npm包,这是react原生checkout this native base docs可用的最佳UI解决方案
根据需要设置页眉和页脚,使content标记的行为类似于scrollview

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

相关问题