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