反应本机软键盘问题

Question

我在屏幕底部有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'
}

}

​

Answer 1

我刚刚找到了一个答案。

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

这让我希望它也能帮助其他人。:)

Answer 2

我不太清楚你遇到的问题是什么，但我最近在我的应用程序中遇到了避免键盘视图的问题-出于某种原因，本机组件就是不能工作。

看看这个包-它为我做了这个把戏，并提供了一些很酷的定制功能：https://github.com/APSL/react-native-keyboard-aware-scroll-view

Answer 3

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