[英]BackgroundImage being pushed up with KeyboardAvoidView on Android with React Native
I want to stop BackgroundImage being pushed when keyboard appears and only the TextInput components and the button should be pushed up.我想在出现键盘时停止推送 BackgroundImage,并且只应向上推送 TextInput 组件和按钮。 This works fine with the current code on iOS but does not work fine on Android. I have tried with
absolute
position of ImageBackground
and flex
and height
of ImageBackground
but nothing has worked so far.这适用于 iOS 上的当前代码,但在 Android 上无法正常工作。我尝试使用 ImageBackground 的
absolute
ImageBackground
和ImageBackground
的flex
和height
,但到目前为止没有任何效果。 Following are the code and the screenshot on Android:以下是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>
Update 1: Sorry, forgot to add the screenshots (I had already added android:windowSoftInputMode="adjustResize"
in the manifest file):更新 1:抱歉,忘记添加屏幕截图(我已经在清单文件中添加了
android:windowSoftInputMode="adjustResize"
):
And with android:windowSoftInputMode="adjustPan"
, it looks like following:对于
android:windowSoftInputMode="adjustPan"
,它看起来如下所示:
I think you can add this to your AndroidManifest.xml file.我认为您可以将其添加到您的 AndroidManifest.xml 文件中。
android:windowSoftInputMode="adjustPan"
Then the view doesn't get shrunk and the text inputs got pushed up.然后视图不会缩小并且文本输入会被推高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.