React Native Soft Keyboard问题

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>

const Styles = {

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

}

Answer 1

我刚刚找到答案。

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

这帮助我希望它可以帮助别人。 ：）

Answer 2

我不是相当确定我明白你遇到的问题是什么，但我最近在键盘上挣扎以避免在我的应用中查看 - 出于某种原因，本机组件不是工作

检查这个包 - 它为我做了诀窍，并提供了一些很酷的自定义功能： https://github.com/APSL/react-native-keyboard-aware-scroll-view

Answer 3

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