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

【问题标题】：When a textinput focuses, how to avoid pushing a view up and overlay it instead?当文本输入聚焦时，如何避免向上推视图并覆盖它？
【发布时间】：2018-12-01 10:49:07
【问题描述】：

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

Code example

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

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

TextInput 无焦点

TextInput Focused（注意页脚向上推）

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

【问题讨论】：

标签： javascript react-native react-native-flatlist

【解决方案1】：

作为一种解决方法，直到我找到正确的答案，如果它存在 :(，我决定附加键盘侦听器并有条件地呈现页脚。所以基本上如果键盘关闭，则呈现页脚，如果不呈现页脚。它工作得相当好，从渲染到未渲染时有一个图形闪烁，这不是最好的，但它比我拥有的不可用的替代方案更好。我也许能够找到一些方法来解决这个问题。

有点破解，但现在可以使用！

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

【讨论】：

你找到解决办法了吗？
我不认为 tyhis 是正确答案，我有一个包含 textinput 本身的页脚，所以这不是解决方案，您只是以某种方式更改了应用程序的逻辑来解决问题，但对你有好处！但这不是正确的答案！
在父级中使用滚动视图

【解决方案2】：

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

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

【讨论】：

虽然设置 android:windowSoftInputMode="adjustNothing" 确实将键盘覆盖在页脚上。它会禁用FlatList 内的TextInputs 的键盘感知。这也禁用了整个应用程序的键盘意识。所以这个解决方案不适用于这种情况。

【解决方案3】：

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

在 Scrollview 中，你可能有 flatlist + Textinput

还将平面列表绑定到一个高度

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

【讨论】：