Question

我想在底部标签导航器中设置参数。

在标签导航器中，我有4个标签，其中2个（汽车和自行车）使用同一屏幕显示FlatList。 FlatList的数据来自Cars对象或Bikes对象。

我想让屏幕使用“汽车”或“自行车”对象，具体取决于单击两个选项卡中的哪个。

我现在通过检测routeName使其工作，并在useEffect中通过if / else语句运行它。很好。

但是为了将来使用，以及可能在其他选项卡中使用，我想知道如何在可能的情况下在选项卡导航器中设置参数。

在我的 Navigator.js 文件中，在标签导航器中具有以下标签：

Cars: {
  screen: VehicleList,
  navigationOptions: ({navigation}) => ({
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      navigation.setParams({fromTab: "carsTab"});
      defaultHandler()
      console.log(navigation);
    },
    tabBarIcon: tabInfo => {
      return (
        <Ionicons
          name="ios-list"
          size={27}
          color={tabInfo.tintColor}
        />
      );
    },
    tabBarOptions: {
      activeTintColor: "#306fff",
      labelStyle: {
        fontSize: 12,
      },
      tabStyle: {
        paddingTop: 2,
      },
      style: {
        backgroundColor: "#e4f8ff",
      },
    }
  }),
},

当控制台打印出“导航”时，我可以看到所有导航选项，包括setParams和getParam plus状态：

"state": Object {
  "index": 0,
  "isTransitioning": false,
  "key": "Cars",
  "params": undefined,
  "routeName": "Cars",
  "routes": Array [
    Object {
      "key": "id-1580242347609-1",
      "routeName": "Cars",
    },
  ],
},

这有可能吗？还是我应该坚持检查routeName？

使用tabBarOnPress在Tab导航器中设置参数

0 个答案: