如何在 react-native 选项卡导航器的导航栏中添加图标作为按钮

Question

我希望在此处添加搜索图标，但无法添加。有没有办法在导航栏标题旁边添加？

我尝试在反应片段中添加一个视图并将其添加到 Tab.Navigator 中，但看不到它。有其他解决方案吗？

这是我的导航容器

const Navigator = ({ sheetRef }) => {
  const Tab = createMaterialTopTabNavigator();
  const [search, setSearch] = React.useState("");

  const onPress = useCallback(() => {
    setSearch((search) => !search);
  }, []);

  return (
    <Tab.Navigator
      screenOptions={({ route }) => screenOptions(route)}
      keyboardDismissMode="auto"
    >
      <Tab.Screen
        name="Forex"
        children={() => (
          <ForexContextProvider>
            <ForexScreen sheetRef={sheetRef} search={search} />
          </ForexContextProvider>
        )}
      />
      <Tab.Screen
        name="Commodities"
        children={() => (
          <CommoditiesScreen sheetRef={sheetRef} search={search} />
        )}
      />
      <Tab.Screen
        name="Crypto"
        children={() => <CryptoScreen sheetRef={sheetRef} search={search} />}
      />
    </Tab.Navigator>
  );
};

export default Navigator;

Answer 1

<Tab.Screen
    name="Crypto"
    children={() => <CryptoScreen sheetRef={sheetRef} search={search} />}
    options={{
        tabBarIcon: () => <IconComponentName />,
    }}
/>

试试这个

你可以看看更多选项here