如何使KeyboardAvoidingView与Formik向导一起使用?

时间:2020-04-08 18:50:07

标签: react-native

在我的React Native应用中,我正在使用formik-wizard。这是我的向导包装:

<View style={{ flex: 1, paddingStart: 20, paddingEnd: 20, paddingBottom: 16 }}>
  {children}
  <Button
    disabled={!isValid}
    title={actionLabel || 'Next'}
    buttonStyle={{
      borderWidth: 1,
      marginHorizontal: 40,
      paddingTop: 10,
    }}
    onPress={() => {this.submitForm}
  />
</View>

而且,这是向导第一步的内容:

<KeyboardAvoidingView style={{ flex: 1 }} behavior="position">
  <Header>Account Information</Header>
  <SubHeader>
    Please enter your account information.
  </SubHeader>
  <InputLabel style={{ paddingTop: 18 }}>Phone Number</InputLabel>
  <TextInput
    value={values.phoneNumber}
    keyboardType="phone-pad"
    onChangeText={handleChange('phoneNumber')}
    onBlur={handleBlur('phoneNumber')}
    style={styles.input}
  />
  <InputLabel style={{ paddingTop: 18 }}>Email</InputLabel>
  <TextInput
    value={values.email}
    keyboardType="email-address"
    onChangeText={handleChange('email')}
    onBlur={handleBlur('email')}
    style={styles.input}
  />
  <InputLabel style={{ paddingTop: 40 }}>Password</InputLabel>
  <TextInput
    value={values.password}
    secureTextEntry={!isPasswordVisible}
    onChangeText={handleChange('password')}
    onBlur={handleBlur('password')}
    style={styles.input}
  />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'flex-start',
      marginTop: 12,
    }}>
    <View style={{ flex: 1, justifyContent: 'flex-start' }}>
      <PasswordValidation password={values.password}></PasswordValidation>
    </View>
    <View style={{ justifyContent: 'flex-end' }}>
      <PasswordShowHide
        onPress={() => setPasswordVisibility(!isPasswordVisible)}>
        {isPasswordVisible ? 'Hide' : 'Show'}
      </PasswordShowHide>
    </View>
  </View>
</KeyboardAvoidingView>

当键盘打开时,屏幕会正确向上移动,但是由于某些原因,向导包装中的按钮也会与键盘一起向上移动。我该如何避免呢?

0 个答案:

没有答案