У нас есть форма с небольшим количеством вводов. В настоящее время, когда пользователь щелкает последнее поле ввода, (a2a_memo_value) форма перемещается вверх, и клавиатура открывается, а когда ввод становится не в фокусе - клавиатура скрывается, но форма неперемещается вниз. Из-за того, что некоторые элементы не видны в представлении, пользователь должен прокрутить его вниз, чтобы просмотреть элемент.Я хочу прокрутить до конца, когда клавиатура скрывается, чтобы я мог видеть все элементы в форме.
Это мой компонент
return (
<Root>
<KeyboardAwareScrollView >
<Container >
<Content>
<Form testID="a2a_form" accessibilityLabel="a2a_form">
<View style={styles.item}>
<Text note testID="a2a_xferType_label" accessibilityLabel="a2a_xferType_label">Transfer Type</Text>
<Picker
selectedValue={this.state.selectedTransferType}
mode="dropdown"
note="Transfer type note"
placeholder="Transfer type note"
testID="a2a_xferType"
accessibilityLabel="a2a_xferType"
iosHeader="Choose Transfer Type"
iosIcon={<Icon name="arrow-down" />}
style={{
width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width
}}
onValueChange={itemValue => this.handleTransferType(itemValue)}
>
{transferType.map((value, idx) => {
return <Picker.Item key={idx} label={value} value={value} />;
})}
</Picker>
</View>
<View style={styles.item}>
<Text note testID="a2a_fromAcct_label"
accessibilityLabel="a2a_fromAcct_label">From Account</Text>
<AccountsDropDown
testID="a2a_fromAcct"
accessibilityLabel="a2a_fromAcct"
selectedValue={this.state.fromAcct}
accounts={this.state.xferSrcAccts}
isFromAcct={true}
navigation={this.props.navigation}
onValueChange={itemValue => this.handleFromAcctSelection(itemValue)}
/>
</View>
<View style={styles.item}>
<Text note testID="a2a_toAcct_label"
accessibilityLabel="a2a_toAcct_label">To Account</Text>
<AccountsDropDown
testID="a2a_toAcct"
accessibilityLabel="a2a_toAcct"
selectedValue={this.state.toAcct}
isToAcct={true}
skipAcct={this.state.fromAcct}
accounts={this.state.xferDestAccts}
navigation={this.props.navigation}
onValueChange={itemValue => this.setState({ toAcct: itemValue })}
/>
</View>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{margin:10}}>
<Text testID="a2a_amt_label" note
accessibilityLabel="a2a_amt_label" >Amount</Text>
<Item style={Platform.OS == "ios" ? {marginLeft:12} :undefined} >
<Input
value={this.state.amount}
testID="a2a_amt_value"
accessibilityLabel="a2a_amt_value"
keyboardType="numeric"
onChangeText={text => this.setState({ amount: text })}
/>
</Item>
</View>
<View style={{margin:10}}>
<Text testID="a2a_memo_label" note
accessibilityLabel="a2a_memo_label" >Memo</Text>
<Item style={Platform.OS == "ios" ? {marginLeft:12} :undefined}>
<Input
testID="a2a_memo_value"
accessibilityLabel="a2a_memo_value"
value={this.state.memoText.trim()}
onChangeText={val => this.setState({ memoText: val })} />
</Item>
</View>
</TouchableWithoutFeedback>
<Button testID="a2a_next_btn"
accessibilityLabel="a2a_next_btn" block style={styles.btn_save} onPress={this.validateXferForm}>
<Text>Next</Text>
</Button>
</Form>
</Content>
</Container>
</KeyboardAwareScrollView>
</Root>
);