在反应本机选项卡导航器的屏幕之间传递对象

Question

我有一个底部标签栏导航器，并有 3 个屏幕。在菜单屏幕中，我试图选择一个菜单项，然后在选项卡导航器的第二条路线的购物车屏幕中显示所选的菜单项。 这是我的标签导航器

const MenuNavigator = createBottomTabNavigator(
  {
    Menu:MenuScreen,
    Cart:CartScreen,
    Options:OptionScreen
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Menu') {
          iconName = `ios-md-book${focused ? '' : '-outline'}`;
        } else if (routeName === 'Cart') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }else if(routeName ==='Options'){
          iconName=`ios-options${focused? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
    },
    }),tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }

  );

我在按钮的 onPress 函数中有一个菜单项对象，如下所示：

var menuitem={itemId:item.itemId,
                    name:item.name,
                    ingredients:item.ingredients,
                    price:item.price,
                    type:item.type};

并在同一个 onPress 函数中将其分配给 MenuScreen 的 menuItem 对象。

this.setState({menuItem:Object.assign({},menuitem)});

并成功地在属于 Menu-screen 的模式中渲染它，但我也想在 Cart-screen 中渲染它。

但是我将如何从购物车屏幕到达该对象？ 项目代码和画面太多，我只复制了相关部分。

Answer 1

您可以使用 Redux 在用于共享数据的所有屏幕上提供总体存储。如果您正在跨屏幕导航，您还可以使用

传递数据

this.props.navigation.navigate("NewScreen", {data: dataToBePassed})

然后您可以使用

检索数据

this.props.navigation.getParam("data", defaultValue)

您可以了解更多here。