在我的代码中，我正在捕获 as user 的一些详细信息。有很多输入字段和下拉菜单。并非一切正常，所有值都在填充，能够更改值并获取所有数据。但我正在实施“KeyboardAvoidingView”来避免与我的屏幕重叠的键盘。就像当我单击 belwo 输入字段时键盘即将到来但它与字段重叠。虽然它应该自动向上移动。我看到了一些关于“KeyboardAvoidingView”的东西，我很喜欢，但它不起作用。请建议我哪里出错了。我在这里粘贴了我的整个 UI 代码。
import React, { Component } from 'react';
import { Item, Input } from 'native-base';
import { View, Dimensions, ScrollView,KeyboardAvoidingView } from 'react-native';
import _ from 'lodash';
import { RegularText, SmallText } from '../ui/text';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { CustomButton } from '../ui/buttons';
import parentStyle from '../../themes/parent.style';
import DatePicker from '../ui/datePicker';
import { getToday, formatDate, addSubtractDate, getDate } from '../../dateFormat';
import SelectField from '../ui/selectField';
import StagedHeader from '../ui/stagedHeader';
import Modal from "react-native-modal";
import LottieView from 'lottie-react-native';
const minDate = '01/01/1970';
const format = 'DD/MM/YYYY';
const currentDate = formatDate(addSubtractDate(getToday(), 'substract', 'year', 18));
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
class PersonalDetails extends Component {
constructor(props) {
super(props);
let category = [];
let subCategory = [];
let nationality = [];
let defaultNationality = 0;
let defaultCategory = 0;
let defaultSubCategory = 0;
props.categoryArray.map((cat, index) => {
const value = cat.code;
const label = cat.name;
category.push({ value, label });
if (cat.default === 'true') {
defaultCategory = index;
cat.subCategory.map((sub, index) => {
const value = sub.code;
const label = sub.name;
if (sub.default === 'true') {
defaultSubCategory = index;
}
subCategory.push({ value, label });
})
}
})
props.nationalityArray.map((nat, index) => {
const value = nat.code;
const label = nat.name;
nationality.push({ value, label });
});
this.state = {
dateOfBirth: currentDate,
firstName: props.firstName || '',
lastName: props.lastName || '',
customerCategoryOptions: category,
customerSubCategoryOptions: subCategory,
customerCategory: category[defaultCategory].value,
customerSubCategory: subCategory[defaultSubCategory].value,
uniqueIdNo: '',
nationalityOptions: nationality,
nationality: nationality[defaultNationality].value,
riskCategory: props.riskCategory
}
this.fetchRiskCategory(category[defaultCategory].value, subCategory[defaultSubCategory].value);
}
fetchRiskCategory = async (customerCategory, customerSubCategory) => {
await this.props.fetchRiskCategory(customerCategory, customerSubCategory);
this.setState({
riskCategory: this.props.riskCategory
})
}
nextStep = async () => {
const { firstName, lastName, dateOfBirth, customerCategory, customerSubCategory, uniqueIdNo, nationality, riskCategory } = this.state;
const dob = dateOfBirth.split('/');
const personalDetails = {
firstName: firstName,
lastName: lastName,
dateOfBirth: getDate(`${dob[2]}-${dob[1]}-${dob[0]}`),
customerCategory: customerCategory,
customerSubCategory: customerSubCategory,
uniqueIdNo: uniqueIdNo,
nationality: nationality,
riskCategory: riskCategory
};
this.props.nextStep(personalDetails, this);
};
onChangeText = async (text, identifier) => {
if (identifier === 'FN') {
this.setState({
firstName: text
})
} else if (identifier === 'LN') {
this.setState({
lastName: text
})
} else if (identifier === 'UIN') {
this.setState({
uniqueIdNo: text
})
}
}
onPickerChange = async (key, value, identifier) => {
let { categoryArray } = this.props;
let defaultSubCategory = 0;
let subCategory = [];
if (identifier === 'CAT') {
categoryArray.map((cat, index) => {
if (cat.code === value) {
cat.subCategory.map((sub, index) => {
const value = sub.code;
const label = sub.name;
if (sub.default === 'true') {
defaultSubCategory = index;
}
subCategory.push({ value, label });
})
}
})
this.setState({
customerSubCategoryOptions: subCategory,
customerSubCategory: subCategory[defaultSubCategory].value,
customerCategory: value
});
await this.fetchRiskCategory(value, subCategory[defaultSubCategory].value);
} else if (identifier === 'SCAT') {
this.setState({
customerSubCategory: value
});
await this.fetchRiskCategory(this.state.customerCategory, value);
} else if (identifier === 'NAT') {
this.setState({
nationality: value
});
}
}
onDateChange = async (value) => {
this.setState({
dateOfBirth: value
});
}
render() {
const { navigation, appliedTheme, appliedMode, isLoading } = this.props;
const { firstName, lastName, customerCategory, customerSubCategory, nationality, uniqueIdNo,
nationalityOptions, customerCategoryOptions, customerSubCategoryOptions, riskCategory } = this.state;
let signatureHeadingColor = parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureHeadingColor : null
if (navigation.length === 0) {
return (
<View>
<NoDataFound imageType='record' />
</View>
);
}
return (
<View style={{ backgroundColor: '#FFFFFF', height: '100%' }}>
<Modal isVisible={isLoading} coverScreen={true}>
<View style={{ height: deviceHeight, width: deviceWidth }}>
<LottieView source={require('../animations/login_authentication.json')} autoPlay loop />
</View>
</Modal>
<StagedHeader navigation={navigation} subtitle={'Personal Details'}
backgroundColor={'#F3F4F9'} subTitleColor={'#67809F'} backButtonColor={'#67809F'}
totalSteps={2} currentStep={1} stepsColor={signatureHeadingColor} />
<KeyboardAvoidingView>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{ paddingLeft: 15, paddingTop: 10 }}>
<RegularText text={'PERSONAL INFO'} textColor='#989898' fontWeight='bold' style={{ fontSize: hp('2%') }} />
</View>
<View style={{ padding: 15 }}>
<View style={{ marginTop: 15 }}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="#4A494A" text={`First Name`} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
<Input
value={firstName}
keyboardType='default'
onChangeText={(text) => this.onChangeText(text, 'FN')}
/>
</Item>
</View>
<View style={{ marginTop: 15 }}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="#4A494A" text={`Last Name`} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
<Input
value={lastName}
keyboardType='default'
onChangeText={(text) => this.onChangeText(text, 'LN')}
/>
</Item>
</View>
<View style={{ marginTop: 15 }}>
<SelectField
label="Customer Category"
options={customerCategoryOptions}
value={customerCategory}
onChange={(key, value) => this.onPickerChange(key, value, 'CAT')}
that={this}
setIcon={true}
textColor='#4A494A'
/>
</View>
<View style={{ width: '100%', height: '.1%', backgroundColor: 'black' }}></View>
<View style={{ marginTop: 15 }}>
<SelectField
label="Sub Category"
options={customerSubCategoryOptions}
value={customerSubCategory}
onChange={(key, value) => this.onPickerChange(key, value, 'SCAT')}
that={this}
setIcon={true}
textColor='#4A494A'
/>
</View>
<View style={{ width: '100%', height: '.1%', backgroundColor: 'black' }}></View>
{riskCategory !== '' && <View style={{ marginTop: 15 }}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="#4A494A" text={`Risk Category`} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
<Input editable={false}
value={riskCategory}
keyboardType='default'
/>
</Item>
</View>}
<View style={{ marginTop: 15 }}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="#4A494A" text={`Unique Identification Number`} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
<Input
value={uniqueIdNo}
onChangeText={(text) => this.onChangeText(text, 'UIN')}
/>
</Item>
</View>
<View style={{ marginTop: 15 }}>
<SelectField
label="Nationality"
options={nationalityOptions}
value={nationality}
node="Gender"
onChange={(key, value) => this.onPickerChange(key, value, 'NAT')}
that={this}
setIcon={true}
textColor='#4A494A'
/>
</View>
<View style={{ width: '100%', height: '.1%', backgroundColor: 'black' }}></View>
<View style={{ marginTop: 15,marginBottom:40 }}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="#4A494A" text={`Date of Birth`} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
<DatePicker
minDate={minDate}
maxDate={currentDate}
currentDate={this.state.dateOfBirth}
format={format}
width={deviceWidth}
onChange={(dateOfBirth) => this.onDateChange(dateOfBirth)}
marginLeft={0}
/>
</Item>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={{ alignSelf: 'center', paddingTop: 20, position: 'absolute', bottom: 10 }}>
<CustomButton backgroundColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].primaryButtonColor : null}
width={deviceWidth - 30} label={'Proceed'} height={60}
disabled={!this.state.firstName || !this.state.lastName || !this.state.uniqueIdNo }
onPress={() => this.nextStep()} labelFontSize={hp('2.5%')}>
</CustomButton>
</View>
</View>
);
}
}
export default PersonalDetails;
谢谢
