如何将道具从 createBottomTabNavigator 发送到每个标签屏幕？

Question

我正在使用 createBottomTabNavigation，我有 4 个屏幕，我可以通过按屏幕底部的标签栏屏幕来访问它们。我还使用 Stack Navigation 在那里显示屏幕的标题，而且所有屏幕都有相同的设置图标。

我可以在处理“设置”图标上的 onPress 事件的每个屏幕中执行相同的功能，但这是重复的，我不想这样做。

我的问题是 - 有没有办法让我将一个函数作为 props 从包含底部导航的 App 组件传递到每个屏幕？

应用屏幕代码：

<NavigationContainer >
 <Tab.Navigator initialRouteName="Home"  tabBarOptions={{
       activeTintColor: '#FF9F0A',
       inactiveTintColor:'white',
       style: {
        backgroundColor:'#000000',//color you want to change
          borderTopWidth: 0,
          paddingTop:5,
          paddingBottom:5,
       },
      
     }}>
   <Tab.Screen name="Home" component={Home}  options={{
         tabBarLabel: 'HOME',
         tabBarIcon: ({ color, size }) => (
           <HomeTabIcon name="home" color={color} size={size} />
         ),
       }}/>
   <Tab.Screen name="Controls" component={Controls} options={{
         tabBarLabel: 'CONTROLS',
         tabBarIcon: ({ color, size }) => (
           <ControlsTabIcon name="controls" color={color} size={size} />
         ),
       }}/>
   <Tab.Screen name="Charging" component={Charging} options={{
         tabBarLabel: 'CHARGING',
         tabBarIcon: ({ color, size }) => (
           <ChargingTabIcon name="charging"  color={color} size={size}/>  
         ),
        
       }}/>

充电画面：

   function Charging() {
  return (
    <View style={globalStyles.container}>
      <Text>Charging</Text>
      <StatusBar style="auto" />
    </View>
  );
}

export default function ChargingStackScreen() {
  return (
    <ChargingStack.Navigator>
      <ChargingStack.Screen name="CHARGING" component={Charging} options={{ 
         headerRight: () => (
          <View style={globalStyles.headerRight}>
            <SettingsIcon />
          </View>
        ),
        headerTitleAlign:'left',
        headerTintColor: 'white',
        headerTitleStyle: globalStyles.headerTitle,
        headerStyle:  globalStyles.header
         }}/>
    </ChargingStack.Navigator>
  );
}

Answer 1

所以我认为你应该做的是将 header 作为一个单独的组件，你可以在其中使用 useNavigation 挂钩（假设你使用的是最新版本的 react-navigation)，并让设置按钮执行您需要的导航。然后只在 Tab.Navigator 上方渲染 header 组件一次，而不是在每个屏幕上渲染它。

类似于：

function Header(props){
    const navigation = useNavigation();
    

    // component code
    <SettingsButton onPress={() => navigation.navigate(whatever)}/>

}

然后我很确定（虽然不是 100%）你可以在你的 NavigationContainer 中渲染它，比如：

<NavigationContainer >
<Header/>
 <Tab.Navigator initialRouteName="Home"  tabBarOptions={{
  // rest of the code

如何将道具从 createBottomTabNavigator 发送到每个标签屏幕？

How to send props from createBottomTabNavigation to every tab screen?

react-native

stack-navigator

react-props

react-navigation-bottom-tab