时间戳

首页 > 解决方案 > 通过导航传递状态 React Native/Expo

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

问题描述

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

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

Navigator 是这样设置在它自己的文件中的。我应该通过这个页面设置我的获取请求并将道具传递给每个选项卡吗？

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,
});

标签： react-nativenavigationstateexporeact-props

解决方案

导航时，您可以将参数从一个屏幕传递到其他屏幕。您可以获取数据HomeScreen并传递它们。在官方文档中阅读有关如何执行此操作的更多信息

从文档：

这有两个部分：

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

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

推荐阅读