如何避免Android react-native上的键盘推送布局
如何避免Android react-native上的键盘推送布局
提问于 2017-03-17 01:08:57
我面对这个问题已经几个月了，但我仍然不能解决它。我在视图的底部有一个文本输入，一旦点击，它就会随着软键盘一起弹出来。取而代之的是，整个布局被向上推，你看不到上面的部分。
我尝试了许多不同的键盘间隔库，但它们都将TextInput推得更高。
截图：Without keyboard With keyboard
以下是我的主要观点：
<View
style={{
flex: 1,
alignItems: 'stretch',
justifyContent: 'space-between',
overflow: 'hidden',
backgroundColor: Colors.darkBlue
}}
>
{/* Header */}
<View
style={{
flexDirection: 'row',
alignItems: 'stretch',
height: 300
}}>
{/* Question bubble */}
{ (this.state.question && this.state.question !== '') ? (
<TouchableOpacity
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
alignItems: 'stretch',
paddingRight: QUESTION_SPEAKER_RADIUS
}}
>
<View
style={{
flex: 1,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Text>
{this.state.question}
</Text>
</View>
</TouchableOpacity>
) : null
}
</View>
<KeyboardInput
style={{}}
onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}
onConfirm={(text) => this.onConfirmText(text) }
/>
</View>下面是KeyboardInput：
<View
style={{
alignSelf: 'stretch',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: Colors.pink,
borderColor: Colors.lime,
borderTopWidth: 4,
padding: 6,
}}>
<View
style={{
flex: 1,
borderRadius: 6,
padding: 0,
backgroundColor: Colors.white,
alignItems: 'stretch',
}}
>
<TextInput
placeholder={Strings.child_keyboard_placeholder}
value={this.state.messageTextInput}
onChangeText={(text) => this.setState({messageTextInput: text})}
style={{
height: 50,
marginLeft: 10,
marginRight: CONFIRM_BUTTON_SIZE / 2
}}
underlineColorAndroid='transparent'
numberOfLines={2}
maxLength={70}
autoCorrect={false}
returnKeyType='next'
/>
</View>
</View>在Android上使用RN 0.35。
回答 7
Stack Overflow用户
发布于 2019-08-10 21:44:51
我尝试了所有我能在GitHub或堆栈溢出中找到的解决方案。在AndroidManifest.xml中添加下面这行代码会很有帮助。
我试过了
windowSoftInputMode="adjustPan"有时它是有效的，但它行为不端。
然后我遇到了这个
windowSoftInputMode="adjustResize"这也是错误的，我最终将它们结合在一起，就像这样，它开箱即用。
android:windowSoftInputMode="adjustPan|adjustResize"然后，您可以使用react-native KeyboardAvoidingView组件。
<KeyboardAvoidingView
style={{ flex: 1}}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0}
>希望这对你有帮助。
Stack Overflow用户
发布于 2018-06-24 07:35:57
推杆
android:windowSoftInputMode="adjustNothing"在Manifest中为我工作。
Stack Overflow用户
发布于 2021-01-16 20:37:15
所有的答案都是好的，但在使用expo时不起作用。
托管工作流
如果使用expo，您可以在app.json中像这样使用softwareKeyboardLayoutMode
"android": {
...
"softwareKeyboardLayoutMode": "pan"
},你需要在expo版本的38.0.0+上
裸工作流
否则，修改AndroidManifest.xml将起作用：
windowSoftInputMode="adjustPan"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42840555
复制相关文章
相似问题