React Native KeyboardAwareScrollView：隐藏键盘时滚动到结束

Question

我们有一个输入很少的表单。当前，当用户单击最后一个输入字段时，(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>
            );

Answer 1

您正在使用KeyboardAwareScrollView对吗？

然后，您需要定义resetSrollToCoords属性，因为您必须告诉组件您剩下的默认位置是什么。