Как передать данные из одного компонента в навигатор и из навигатора в компонент

Question

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

На самом деле я 've это когда пользователь вошел в систему:

User.username = data.username;
User.id = responseJson.id;
User.token = responseJson.token;
this.props.navigation.navigate('Main', { User: User });

Пользователь находится там, где все сохранено и работает.

Данные отправляются на главный коммутатор. Навигация внутри AppContainer:

export default createAppContainer(createSwitchNavigator(
    {
        Auth: { screen: AuthStack, navigationOptions: { tabBarVisible: false } },
        Main: { screen: MainStack },
    },
    {
        initialRouteName: "Auth"
    }),
);

так что он идет в Mainstack, который является bottomTabNavigator и работает так:

const MainStack = createBottomTabNavigator(
    {
        Services: {
            screen: Home,
            navigationOptions: {
                tabBarLabel:"Services",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="home" size={30} color="#0033CC" />
                )
            },
        },

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

Так можно ли отправить эти данные «Пользователь» на мой домашний экран?Я открыт для любых предложений или ответов, это мой первый проект Native, так что, возможно, есть некоторые ошибки:)

Answer 1

Я сделал что-то, может быть, немного более понятным:

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

this.props.navigation.navigate('Main', { User: User})

Таким образом, это происходит на Main, который открывает Mainstack Screen, который является bottomTabNavigator, и если я не делаю никаких ошибок, мои данные пользователя, которые я отправилнаходится в этом Mainstack, но я не знаю, как получить его и как поделиться им с другими компонентами.Каждый компонент имеет свой собственный файл js, есть только контейнер App и Authstack / Mainstack, которые находятся в одном файле.

Надеюсь, вы поняли это!

Answer 2

Возможно, вы захотите сохранить пользовательские данные в приложении (сохраните их в хранилище, чтобы, когда пользователь выходит из приложения, затем входит, он остается в системе). Именно поэтому у реагирующей навигации есть switchNavigator (тот, который вы используете). Чтобы сохранить данные, вы можете использовать AsyncStorage для сохранения пользовательских данных и в конструкторе навигатора коммутатора проверить, доступны ли пользовательские данные в хранилище или нет, а затем решить, следует ли перейти к приложению или странице аутентификации. На самом деле React Navigation предоставляет пример этого: https://reactnavigation.org/docs/en/auth-flow.html. Поскольку вы новичок в RN, вот дополнительный совет по управлению данными: вы можете использовать State в каждом компоненте, который предназначен только для этого конкретного компонента (который также является реактивным), вы можете использовать глобальные данные (хранилище), совместно используемые всеми Компоненты в приложении (отметьте «Реагировать на реду» / «Поток / Моб»), вы можете обмениваться данными из родительских компонентов с дочерними компонентами, передавая данные / функции в подпорки (или атрибуты), и вы можете использовать новый контекстный API React для использования провайдера. (также как хранилище, совместно используемое родительскими и дочерними компонентами)