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

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

并在属于菜单屏幕的模式中成功渲染它，但我也想在购物车屏幕中渲染它。

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

Answer 1

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

传递数据

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

然后您可以使用

检索数据

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

你可以了解更多here。

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

Passing objects between react native tab navigator's screens

javascript

reactjs

react-native

react-native-navigation

react-native-tabnavigator