BackgroundImage正在使用KeyboardAvoidView在Android上使用React Native推送

ddrv8njm  于 2023-11-21  发布在  React
关注(0)|答案(2)|浏览(136)

我想停止BackgroundImage被推时键盘出现,只有文本输入组件和按钮应该被推了.这与iOS上的当前代码工作正常,但不工作在Android上的罚款.我已经尝试与absoluteImageBackgroundflexheightImageBackground的位置,但没有工作到目前为止.以下是代码和截图在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:**抱歉,忘记添加截图了(我已经在manifest文件中添加了android:windowSoftInputMode="adjustResize"):


的数据

对于android:windowSoftInputMode="adjustPan",它看起来像下面这样:


1u4esq0p

1u4esq0p1#

只需在ImageBackground中给予flex:1,而不是赋予额外CSS属性。

vtwuwzda

vtwuwzda2#

我想你可以把它添加到AndroidManifest.xml文件中。

android:windowSoftInputMode="adjustPan"

字符串
然后视图不会缩小,文本输入会被推高。

相关问题