Реагируйте с навигацией: переходите непосредственно к последней странице и на go на предыдущие - PullRequest
Новая
       88

Реагируйте с навигацией: переходите непосредственно к последней странице и на go на предыдущие

0 голосов
/ 29 января 2020

In Реагирование навигации , Как я могу go перейти непосредственно на последнюю страницу и, когда BackButton нажата, go вернуться на предыдущие экраны.

Позвольте мне Объясните четко,

Пользователи могут добавлять новые формы, нажимая кнопку «Добавить». В моем случае пользователь должен перейти на 3 страницы, чтобы создать новую форму.

Пример добавления:

ListPage ---> Page1 - -> Page2 ----> Page3 (отправить в API)

Это прекрасно работает.

Пользователь может edit отправить отправленные формы со страницы списка. Поэтому, если пользователь нажимает на элемент списка, он должен перейти непосредственно к Page3, а затем при нажатии BackButton он должен прийти к Page2, затем Page1, затем ListPage.

Пример для редактирования:

ListPage ---- directnavigation ----> Page3 ---- backpressed ----> Page2 ---- backpressed ----> Page1 ---- backpressed ----> ListPage

Как мне справиться с этим в сценарии edit?

Ответы [ 3 ]

0 голосов
/ 29 января 2020

реакции-родной есть лучший способ решить ваш сценарий. пожалуйста, используйте this.props.navigation.dispatch (имя экрана); .

см. эту ссылку https://reactnavigation.org/docs/en/navigation-prop.html

0 голосов
/ 30 января 2020

Я исправил это с помощью StackActions.

Вот код, 

  StackActions.reset({
    index: 2,
    key: undefined,
    actions: [
        NavigationActions.navigate({ routeName: 'Page1' }),
        NavigationActions.navigate({ routeName: 'Page2' }),
        NavigationActions.navigate({ routeName: 'Page3' })
    ]
});
0 голосов
/ 29 января 2020

Не знаю, используете ли вы заголовок React или собственный базовый заголовок. Но здесь я показываю пример, где я использовал собственный базовый заголовок с навигацией React 

    <Container>
                    <Header androidStatusBarColor={Constants.primary} hasTabs style={[Styles.header]}>
                        <Left style={{ flex: 1 }}>
                            <TouchableOpacity onPress={() => props.navigation.goBack()} style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Icon name="ios-arrow-back" style={[Styles.headerLeftIcon]} />
                                <Text style={[Styles.headerLeftText]}>Go Back</Text>
                            </TouchableOpacity>
                        </Left>
<Container>

Это базовый код c, где пользователь возвращается к щелчку стрелки назад с помощью props.navigation.goBack ().

Так что для вашего сценария я бы предложил вам отправить параметр на 3-ю страницу (например: type: 'edit'). Поэтому, когда пользователь нажимает кнопку «Назад», проверьте тип и, если он не редактируется, выполните basi c props.navigation.goBack () или если его измените go для props.navigation.navigate («Вторая страница»).

Поскольку в основном маршруты работают как pu sh и pop, поэтому, если мы попали прямо на страницу 3, страницы 1 и страница 2 не являются частью массива маршрутов, поэтому мы должны показать путь к go для страницы 2 со страницы 3 на обратной стороне. нажатие кнопки

...