当文本输入聚焦时，如何避免将视图向上推并覆盖它？

Question

这里是app.js重现问题的简单要点

Code example

我有一个屏幕，其中 FlatList 夹在页眉和页脚组件之间。 FlatList 的行在单击时会变成 TextInputs。 Flatlist 通过向上滚动单击的行使其恰好位于键盘上方，可以很好地处理此屏幕中的键盘。

问题是 Footer 组件出现在键盘上方而不是被覆盖。编辑文本字段时不需要看到页脚，在实际用例中，页眉和页脚要大得多，因此严重限制了可用的屏幕空间。它基本上将文本输入压缩成一个几乎无法使用的小行。

TextInput 未聚焦

TextInput 聚焦（注意页脚向上推）

如何让键盘覆盖页脚，同时保持 TextInputs 键盘的感知？

Answer 1

在 Android 中，如果键盘出现，我们的布局将自动调整大小，在 IOS 中不会发生。

要解决此问题，您可以将 AndroidManifest.xml 中的 android:windowSoftInputMode="adjustResize" 更改为 adjustNothing

Answer 2

作为解决方法，直到我找到正确的答案，如果它存在 :(，我决定附加键盘侦听器并有条件地呈现页脚。所以基本上如果键盘关闭，则呈现页脚，如果不是，则不呈现页脚渲染。它工作得相当好，从渲染到不渲染时会出现图形闪烁，这不是最好的，但比我拥有的无法使用的替代方案要好。我也许能找到某种方法来消除这种情况点.

有点难，但现在可以用了！

注意：键盘侦听器不适用于 android:windowSoftInputMode="adjustNothing"，但它们适用于 adjustResize，这是我无论如何都需要使用的。

修改后的部分代码如下：

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      showFooter: true
    }
  }

  RenderFooter(){
    if(this.state.showFooter){
      return(
         <View style={styles.footerContainer}>
          <Text style={styles.headerText}>
            Footer
          </Text>
        </View>
      )
    } else {
      return null
    }
  }

  componentWillMount(){
      this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
      this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidShowSub.remove();
    this.keyboardDidHideSub.remove();
  }

  keyboardDidShow = (event) => {
    console.log('keyboardDidShow')
    this.setState({
      showFooter: false
    })
  };

  keyboardDidHide = (event) => {
    console.log('keyboardDidHide')
    this.setState({
      showFooter: true
    })
  };

  render() {
    return (
      <View  style={styles.container}>
        {this.RenderHeader()}
          <FlatList
              data={data}
              renderItem={({item}) => (
                  <ListItem
                    item = {item}/>
              )}
              extraData={this.state}
              keyExtractor={item => item.name}/>
        {this.RenderFooter()}
      </View>
    );
  }
}

Answer 3

尝试在Parent中使用ScrollView，但将其限制在固定高度和宽度的视图中，因此它显示为静态屏幕而不是滚动视图，

在 Scrollview 中，您可能有 flatlist + Textinput

还将 flatlist 绑定到一个高度

ScrollView - 高度 100% 但固定，不应滚动平面列表 - 80% 高度 TextInput - 20% 高度

当文本输入聚焦时，如何避免将视图向上推并覆盖它？

When a textinput focuses, how to avoid pushing a view up and overlay it instead?

javascript

react-native

react-native-flatlist