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

Question

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

Code example

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

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

TextInput 未聚焦

TextInput Focused(注意页脚向上推)

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

Answer 1

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

有点hack，但现在可以用了!

注意:键盘监听器不适用于 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>
    );
  }
}