2

在构建自定义时Tab.Screen，我尝试传递自定义tabBarIcon。当图标呈现时，它不会导航到组件TestScreen。在我理解的文档中，应该写成：tabBarIconTab.Screen

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <TouchableOpacity>
        <View style={styles.actionButton}>
          <Image source={plus} style={styles.imageIcon} />
        </View>
      </TouchableOpacity>
    ),
  }}
/>

当我省略options：

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
/>

单击时onClick呈现组件。当我阅读有关屏幕选项的文档时，它提到screenOptions应该在导航器或组上传递。我试着看看能不能找到类似的问答：

但我无法看到我的错误在哪里。

我当前的依赖项：

"dependencies": {
  "@react-navigation/bottom-tabs": "^6.0.5",
  "@react-navigation/native": "^6.0.2",
  "expo": "~42.0.1",
  "expo-status-bar": "~1.0.4",
  "react": "16.13.1",
  "react-dom": "16.13.1",
  "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
  "react-native-gesture-handler": "^1.10.3",
  "react-native-safe-area-context": "3.2.0",
  "react-native-screens": "~3.4.0",
  "react-native-web": "~0.13.12"
},
"devDependencies": {
  "@babel/core": "^7.9.0"
},

如何让我的自定义图标呈现并导航到正确的组件？

4

2 回答 2

1

留下这个作为答案，希望它可以帮助其他人。睡在上面之后，我Tab.Screen再次检查了我的，我记得TouchableOpacity它需要一个工作，onPress即使我认为父母会照顾导航，但事实并非如此。

虽然这个答案有点准确，但删除TouchableOpacity, 它会使图标工作，代码：

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <View style={styles.actionButton}>
        <Image source={plus} style={styles.imageIcon} />
      </View>
    ),
  }}
/>

但它违背了自定义按钮的目的和不透明度的变化。仔细观察后，options我想知道如果我将其传递navigation给onPress并使用会navigate怎样？

好吧，它奏效了，我只剩下：

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
  options={({ navigation }) => ({
    tabBarIcon: () => (
      <TouchableOpacity onPress={() => navigation.navigate(routes.FOO)}>
        <View style={styles.actionButton}>
          <Image source={plus} style={styles.imageIcon} />
        </View>
      </TouchableOpacity>
    ),
  })}
/>
于 2021-10-26T13:36:58.927 回答
0

您TouchableOpacity与反应导航内部新闻处理程序重叠，只需用View

如果要自定义选项卡图标的按下行为，请将侦听器对象传递给listener道具https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

于 2021-10-26T02:15:26.883 回答