![](/img/trans.png)
[英]Whole contents are pushed up when using KeyboardAvoidingView in react native
[英]BackgroundImage being pushed up with KeyboardAvoidView on Android with React Native
我想在出现键盘时停止推送 BackgroundImage,并且只应向上推送 TextInput 组件和按钮。 这适用于 iOS 上的当前代码,但在 Android 上无法正常工作。我尝试使用 ImageBackground 的absolute
ImageBackground
和ImageBackground
的flex
和height
,但到目前为止没有任何效果。 以下是Android上的代码和截图:
<ImageBackground
source={require('../../../assets/images/backgroundImage.png')}
style={{
// flex: 1,
justifyContent: 'center',
// height: '100%',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
}}
resizeMode='cover'>
<KeyboardAvoidingView
style={{ flexGrow: 1 }}
enabled
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 1,
flexDirection: 'column',
height: '100%',
}}>
<Image
source={require('../../../assets/images/logo.png')}
style={{ marginBottom: 50 }}
resizeMode='contain'
/>
<SafeAreaView
style={{
height: '50%',
justifyContent: 'flex-end',
width: '100%',
}}>
<View
style={{
width: '100%',
justifyContent: 'flex-end',
marginBottom: 10,
}}>
<TextInput
ref={this.classIdRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 15,
paddingHorizontal: 15,
}}
placeholderTextColor='rgb(218, 218, 218)'
placeholder='Class ID'
value={roomId}
onChangeText={(text) => this.setRoomId({ roomId: text })}
/>
<TextInput
ref={this.nicknameRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 20,
paddingHorizontal: 15,
}}
placeholder='Nickname'
placeholderTextColor='rgb(218, 218, 218)'
value={nickName}
onChangeText={(text) =>
this.setNickName({ nickName: text })
}
/>
<TouchableOpacity
onPress={this.navigateToClassroomHandler}
style={{
backgroundColor: 'rgb(251, 158, 85)',
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
disabled={roomId === '' || nickName === ''}>
<Text
style={{
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
}}>
Attend Class
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</ImageBackground>
更新 1:抱歉,忘记添加屏幕截图(我已经在清单文件中添加了android:windowSoftInputMode="adjustResize"
):
对于android:windowSoftInputMode="adjustPan"
,它看起来如下所示:
我认为您可以将其添加到您的 AndroidManifest.xml 文件中。
android:windowSoftInputMode="adjustPan"
然后视图不会缩小并且文本输入会被推高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.