Reactjs React Native KeyboardawarScrollView:隐藏键盘时滚动至结束

Reactjs React Native KeyboardawarScrollView:隐藏键盘时滚动至结束,reactjs,react-native,native-base,Reactjs,React Native,Native Base,我们有一个输入很少的表单。当前,当用户单击最后一个输入字段(a2a_memo_值)时,表单将向上移动,键盘将打开,当输入失去焦点时,键盘将隐藏,但表单不会向下移动。由于某些元素在视图中不可见,用户需要向下滚动以查看元素。我想在键盘隐藏时滚动到末尾,以便查看表单中的所有元素 这是我的组件 return ( <Root> <KeyboardAwareScrollView >

我们有一个输入很少的表单。当前,当用户单击最后一个输入字段
(a2a_memo_值)
时,表单将向上移动,键盘将打开,当输入失去焦点时,键盘将隐藏,但表单不会向下移动。由于某些元素在视图中不可见,用户需要向下滚动以查看元素。我想在键盘隐藏时滚动到末尾,以便查看表单中的所有元素

这是我的组件

 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>
            );
返回(
转移类型
this.handleTransferType(itemValue)}
>
{transferType.map((值,idx)=>{
回来
})}
从帐户
this.handleFlomacctSelection(itemValue)}
/>
说明
this.setState({toAcct:itemValue})}
/>
数量
this.setState({amount:text})
/>
备忘录
this.setState({memoText:val})}/>
下一个
);

您正在使用
键盘awarScrollView
对吗

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

因此,只需添加以下内容:

<KeyboardAwareScrollView
  resetScrollToCoords={{ x: 0, y: 0 }}
  scrollEnabled={false}
>