1

我有一个底部标签栏导航器，并有 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)});

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

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

4

1 回答 1

1

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

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

然后，您可以使用检索数据

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

你可以在这里了解更多。

于 2018-12-05T01:40:43.800 回答