Проверка поля ввода в реакции-родной-вкладке-представлении - PullRequest
Новая
       5

Проверка поля ввода в реакции-родной-вкладке-представлении

0 голосов
/ 17 марта 2020

Я реализовал react-native-tab-view в моем проекте. Я создал две вкладки. одна - mapView, а другая вкладка содержит поле типа ввода. что я хочу, когда пользователь вводит данные на вкладке типа поля ввода, когда он пытается изменить вкладку без отправки данных. Alert должен прийти для подтверждения. когда пользователь нажал positive в предупреждении, вкладка изменится, в противном случае она останется такой же в представлении вкладки типа ввода.

Я реализовал код для этого, но не работает. Alert подтверждение приходит с опозданием при изменении tab на вкладку mapView.

Main_Container.js

        <TabView
                    navigationState={this.state}
                    initialLayout={{ width: Dimensions.get('window').width }}
                    timingConfig={100}
                    swipeEnabled={true}
                    tabBarPosition={'bottom'}
                    renderScene={({ route }) => {
                        switch (route.key) {
                            case 0:
                                return <AQI_MapView update={route.key == this.state.index} />;
                                break;
                            case 1:
                                return (
                                    <AddCategoryData
                                        onRef={(ref) => (this.child = ref)}
                                        update={route.key == this.state.index}
                                    />
                                );
                                break;
                            default:
                                return null;
                        }
                    }}

                    renderTabBar={(props) => (
                        <TabBar
                            {...props}
                            onTabPress={({ route, preventDefault }) => {
                                if (route.key == 0) {
                                    if ((this.TabPress()) == true) {
                                        preventDefault();
                                    }
                                }
                            }}
                     />
                     )}
                   onIndexChange={(index) => this.setState({ index })}
            />

AddCategoryData.js

         AsyncAlert = () => {
    return new Promise((resolve, reject) => {
        Alert.alert(
            'Are you sure want to change the tab without saving the data',
            'You will loss your enter data',
            [ { text: 'YES', onPress: () => resolve(true) }, { text: 'NO', onPress: () => resolve(false) } ],
            { cancelable: false }
        );
    });
};

         checkFormData = async () => {
         const { selectedCategoryid, selectedCategoryname, tehsilId, description, address, districtId } = this.state;
    if (
        selectedCategoryid != null ||
        selectedCategoryname != null ||
        description != null ||
        address != null ||
        districtId != null ||
        tehsilId != null
    ) {
        const userResponse = await this.AsyncAlert();
        return userResponse;
    }
    else {
        return false;
    }
};
...