Question

在我的本地本机应用程序中，我有一个获取请求，该请求正在从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传递状态

1 个答案: