React Native 软键盘问题答案

【问题标题】：React Native Soft Keyboard IssueReact Native 软键盘问题
【发布时间】：2017-05-25 11:36:02
【问题描述】：

我在屏幕底部有 TextInput。当 TextInput 聚焦时，键盘会出现，因此所有的 flex 视图都会缩小到可用的屏幕。我想实现页面布局不应该改变并且输入应该对用户可见。

  <View style={MainView}>
        <View style={subMain1}>
            <View style={{flex:1,backgroundColor:'#add264'}}></View>
            <View style={{flex:1,backgroundColor:'#b7d778'}}></View>
            <View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
        </View>
        <View style={subMain2}>
            <View style={{flex:1,backgroundColor:'#cce39f'}}></View>
            <View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
            <View style={{flex:1,backgroundColor:'#69ee9a'}}>
                <TextInput placeholder="input field"/>
            </View>

        </View>
    </View>

常量样式 = {

MainView:{
    flex:1,
    backgroundColor:'green'
},
subMain1:{
    flex:1,
    backgroundColor:'blue'
},
subMain2:{
    flex:1,
    backgroundColor:'orange'
}

}

【问题讨论】：

标签： react-native

【解决方案1】：

我刚刚找到了答案。

我只需要为我的主容器使用固定高度，在里面我可以使用 flex 布局。如果键盘隐藏了内容，那么我们可以使用 Scrollview，当用户点击输入时，它允许滚动界面。

这对我有所帮助，希望对其他人有所帮助。 :)

【讨论】：

【解决方案2】：

我不太非常确定我了解您遇到的问题，但我最近在我的应用程序中遇到了键盘避免视图的问题 - 出于某种原因，本机组件不是工作。

看看这个包 - 它对我有用，并提供了一些很酷的自定义功能： https://github.com/APSL/react-native-keyboard-aware-scroll-view

【讨论】：

【解决方案3】：

使用“react-native-keyboard-aware-scroll-view”并将其保留为父视图并将所有视图放在该视图中。这个节点模块创建滚动视图，它监听键盘显示事件并自动滚动你的屏幕，这样用户就可以看到输入框而不会隐藏在软键盘后面。

【讨论】：