通过导航 React 传递状态 Native/Expo

Question

在我的 React 本机应用程序中，我有一个获取请求正在从 postgres 服务器获取 JSON。此提取设置状态并通过 HomeScreen 的子级向下传递以在整个组件中保持状态。

在我的 UserScreen 和 OverviewScreen 中，我需要访问由 HomeScreen 的子项刷新的相同状态。如何通过导航传递此道具以设置 OverviewScreen 和 UserScreen 的状态？

导航器在其自己的文件中如此设置。我应该通过此页面设置我的获取请求并将道具传递给每个选项卡吗？

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import OverviewScreen from '../screens/OverviewScreen';
import AchievementsScreen from '../screens/AchievementsScreen';
import UserScreen from '../screens/UserScreen';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-checkbox${focused ? '' : '-outline'}`
          : 'md-checkbox'
      }
    />
  ),
};

const OverviewStack = createStackNavigator({
  Overview: OverviewScreen,
});

OverviewStack.navigationOptions = {
  tabBarLabel: 'Overview',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-trending-up' : 'md-trending-up'}
    />
  ),
};

const AchievementsStack = createStackNavigator({
  Achievements: AchievementsScreen,
});

AchievementsStack.navigationOptions = {
  tabBarLabel: 'Achievments',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-star' : 'md-star'}
    />
  ),
};

const UserStack = createStackNavigator({
  User: UserScreen,
});

UserStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  OverviewStack,
  AchievementsStack,
  UserStack,
});

Answer 1

您可以在导航时将参数从一个屏幕传递到其他屏幕。您可以在 HomeScreen 中获取数据并传递它们。在 official docs

中阅读有关如何执行此操作的更多信息

来自文档：

这里有两部分：

通过将参数放入对象中作为 navigation.navigate 函数的第二个参数将参数传递给路由：this.props.navigation.navigate('RouteName', { /* params go here */ })

读取屏幕组件中的参数：this.props.navigation.getParam(paramName, defaultValue).

通过导航 React 传递状态 Native/Expo

Passing state through navigation React Native/Expo

navigation

state

react-native

expo

react-props