0

我想在键盘出现时停止 BackgroundImage 被推,只有 TextInput 组件和按钮应该被推上去。这适用于 iOS 上的当前代码,但不适用于 Android。我尝试过使用and和of 的absolute位置,但到目前为止没有任何效果。以下是Android上的代码和屏幕截图:ImageBackgroundflexheightImageBackground

<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",它看起来如下所示:

在此处输入图像描述

4

1 回答 1

0

我认为您可以将其添加到您的 AndroidManifest.xml 文件中。

android:windowSoftInputMode="adjustPan"

然后视图不会缩小并且文本输入会被推高。

于 2020-12-25T08:32:06.557 回答