Реагирующая навигация: возможно ли перейти на один и тот же экран из разных стековых навигаторов? - PullRequest
Новая
       10

Реагирующая навигация: возможно ли перейти на один и тот же экран из разных стековых навигаторов?

0 голосов
/ 10 октября 2018

Я пишу приложение, которое использует реагирующую навигацию.Мое приложение имеет нижний TabNavigator, в котором каждая вкладка состоит из stackNavigator, например, так:

Routes.js: 

const FirstStack = createStackNavigator({
    First: {
        screen: FirstScreen,
        navigationOptions: {
            header: props => <AppToolbar />
        }
    }
});

const SecondStack = createStackNavigator({
    Second: {
        screen: SecondScreen,
        navigationOptions: {
            header: props => <AppToolbar />
        }
    }
});

const ThirdStack = createStackNavigator({
    Third: {
        screen: ThirdScreen,
        navigationOptions: {
            header: props => <AppToolbar />
        }
    }
});

const FourthStack = createStackNavigator({
    Fourth: {
        screen: FourthScreen,
        navigationOptions: {
            header: props => <AppToolbar />
        }
    }
});

const FifthStack = createStackNavigator({
    Fifth: {
        screen: FifthScreen,
        navigationOptions: {
            header: props => <AppToolbar />
        }
    }
});

export const AppStack = createBottomTabNavigator(
    {
        First: {
            screen: FirstStack,
            navigationOptions: {
                title: "First",
                tabBarLabel: "First",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="ios-home" color={tintColor} size={24} />
                )
            }
        },
        Second: {
            screen: SecondStack,
            navigationOptions: {
                title: "Second",
                tabBarLabel: "Second",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="ios-clock" color={tintColor} size={24} />
                )
            }
        },
        Third: {
            screen: ThirdStack,
            navigationOptions: {
                title: "Third",
                tabBarLabel: "Third",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="ios-fitness" color={tintColor} size={24} />
                )
            }
        },
        Fourth: {
            screen: FourthStack,
            navigationOptions: {
                title: "Fourth",
                tabBarLabel: "Fourth",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="ios-cloud-download"
                        color={tintColor}
                        size={24}
                    />
                )
            }
        },
        Fifth: {
            screen: FifthStack,
            navigationOptions: {
                title: "Fifth",
                tabBarLabel: "Fifth",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="ios-person" color={tintColor} size={24} />
                )
            }
        }
    },
    {
        initialRouteName: "First",
        order: ["First", "Second", "Third", "Fourth", "Fifth"],
        tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "grey",
            style: {
                backgroundColor: "#121212",
                borderTopColor: "#303030"
            }
        }
    }
);

Каждый stackNavigator внутри вкладок в tabNavigator имеет свой собственный заголовок, поэтомучто я могу настроить заголовок для каждой вкладки, но у всех заголовков есть кнопка, которая должна перейти к экрану профиля (в данном примере это значок контакта).

AppToolbar.js: 

const appToolbar = props => {
    return (
        <View style={styles.toolbar}>
            <Text style={styles.toolbarTitle}>Title</Text>
            <TouchableOpacity onPress={...}>
                <Icon
                    name="ios-contact"
                    color="grey"
                    size={30}
                    style={{ padding: 0, margin: 0, marginRight: 10 }}
                />
            </TouchableOpacity>
        </View>
    );
};

Что я хочу сделать, так это то, что нажатием на значок контакта приложение должно перейти к экрану профиля. Чего я не знаю, так это того, возможно ли определить глобальный маршрут, доступный из любой точки мира, или я должен добавитьэкран профиля для всех stackNavigators, чтобы он был доступен с каждого экрана в каждом стеке?

Заранее спасибо!

1 Ответ

0 голосов
/ 13 октября 2018

Нашел ответ здесь https://stackoverflow.com/a/50701940/1276438

Используйте stackNavigator со стеком профиля и tabNavigator в качестве дочерних элементов, что делает tabNavigator маршрутом по умолчанию.

...