KeyBoardAvoidingView 未按预期工作

Question

我使用“KeyBoardAvoidingView”来避免屏幕上输入元素的键盘，其中还包含图像。

内容几乎占据了屏幕，我希望当用户打算使用键盘时内容向上滚动。我已经尝试了“KeyBoardAvoidingView”和scrollView 的多个行为属性。

“当用户输入电话号码时向上滚动屏幕” - 如何实现？

JSX

 <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'height' : undefined}
      style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.loginScreenVisible}>
          {/** The vector image displayed in the login Screen */}
          <Image
            source={require('../assets/images/mobileLoginPurple.png')}
            resizeMode="contain"
            style={styles.image}
          />

          <View style={styles.textContainer}>
            <Text style={styles.textPrimary}>Phone Verification</Text>
            <Text style={styles.textDescription}>
              We need to verify your Phone number before getting started !
            </Text>
          </View>

          {otpScreenVisible ? (
            <View style={styles.inputContainer}>
              <OTPInputView
                pinCount={6}
                style={{width: '90%', height: '40%'}}
                autoFocusOnLoad
                codeInputFieldStyle={styles.boxStyle}
                editable
                onCodeChanged={code => {
                  setCode(code);
                }}
                codeInputHighlightStyle={styles.highLightStyle}
              />

              {loading ? (
                <View>
                  <ActivityIndicator
                    style={styles.activityIndicator}
                    animating={loading}
                    size="small"
                    color={colors.primary100}
                  />
                </View>
              ) : (
                <TouchableOpacity
                  style={styles.button}
                  onPress={handleVerifyOTP}>
                  <Text style={styles.buttonText}>Verify OTP</Text>
                </TouchableOpacity>
              )}

              <View style={styles.actionContainer}>
                <TouchableOpacity onPress={handleEditPhoneNum}>
                  <Text>Edit phone number?</Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={handleResendOTP}>
                  <Text>Resend code</Text>
                </TouchableOpacity>
              </View>
            </View>
          ) : (
            <View style={styles.inputContainer}>
              <PhoneInput
                ref={phoneRef}
                defaultCountry="IN"
                placeholder="Phone Number"
                theme={theme == 'dark' ? 'dark' : 'light'}
              />
              {loading ? (
                <View>
                  <ActivityIndicator
                    style={styles.activityIndicator}
                    animating={loading}
                    size="small"
                    color={colors.primary100}
                  />
                </View>
              ) : (
                <TouchableOpacity
                  style={styles.button}
                  onPress={handleSendTheCode}>
                  <Text style={styles.buttonText}>Send the code</Text>
                </TouchableOpacity>
              )}
            </View>
          )}
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>

还有造型。

 StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
    },

    loginScreenVisible: {
      flex: 1,
      alignItems: 'center',
    },

    image: {
      width: '80%',
      height: 300,
      marginVertical: 50,
    },

    textContainer: {
      width: '80%',
      justifyContent: 'center',
      alignItems: 'center',
    
      textAlign: 'center',
    },

    textPrimary: {
      fontSize: 24,
      fontWeight: '800',
      color: 'black',
      marginBottom: 10,
    },

    textDescription: {
      fontSize: 13,
      textAlign: 'center',
      color: colors.text200,
    },

    inputContainer: {
      margin: 30,
      flex: 1,
      width: '80%',
      alignItems: 'center',
    },

    button: {
      backgroundColor: colors.primary100,
      width: '100%',
      padding: 10,
      marginTop: 20,
      borderRadius: 10,
      justifyContent: 'center',
      alignItems: 'center',
    },

    buttonText: {
      fontSize: 18,
      color: colors.text200,
    },

    boxStyle: {
      width: 40,
      height: 50,
      borderWidth: 3,
      borderColor: colors.primary100,
      color: colors.text100,
      fontSize: 20,
    },

    highLightStyle: {
      borderColor: colors.primary300,
    },

    actionContainer: {
      marginTop: 5,
      flexDirection: 'row',
      justifyContent: 'space-between',
      width: '100%',
    },

    activityIndicator: {
      marginVertical: 16,
    },
  });

Answer 1

如果您在屏幕上使用滚动视图，请尝试使用react-native-keyboard-aware-scroll-view。

您可以在这里找到它https://github.com/APSL/react-native-keyboard-aware-scroll-view