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在用于共享数据的所有屏幕上提供总体存储。如果要跨屏幕浏览，还可以使用

传递数据

n2

然后您可以使用

检索数据

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

您可以了解更多here。

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

1 个答案: