Tab.Navigation 中的道具反应导航不起作用

Posted 2023-03-14

【中文标题】Tab.Navigation 中的道具反应导航不起作用

【英文标题】：Props in Tab.Navigation react navigation not working

【发布时间】：2021-08-17 13:41:46

【问题描述】：

我制作了一个导航组件并将所有屏幕放入其中。 它运行良好，但 Tab.Navigation 中的道具不起作用，例如 barStyle、initialRouteName、.... 我为每个屏幕制作堆栈并将所有堆栈放在底部导航中，我想更改底部导航的选项，但我不能。 我设置了 initialRouteName 和 bar 样式，但现在可以正常工作了。 感谢您的回复。

import NavigationContainer from '@react-navigation/native';
import createBottomTabNavigator from '@react-navigation/bottom-tabs';
import CollectionScreen from '../screens/Collection';
import LiveScreen from '../screens/Live';
import PrayScreen from '../screens/Pray';
import ProfileScreen from '../screens/Profile';
import PublicationScreen from '../screens/Publication';
import React from 'react';
import createNativeStackNavigator from '@react-navigation/native-stack';

const LiveStack = createNativeStackNavigator();

function LiveStackScreen() 
  return (
    <LiveStack.Navigator screenOptions=headerShown: false>
      <LiveStack.Screen name="LiveScreen" component=LiveScreen />
    </LiveStack.Navigator>
  );


const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() 
  return (
    <ProfileStack.Navigator screenOptions=headerShown: false>
      <ProfileStack.Screen name="ProfileScreen" component=ProfileScreen />
    </ProfileStack.Navigator>
  );


const PrayStack = createNativeStackNavigator();
function PrayStackScreen() 
  return (
    <PrayStack.Navigator screenOptions=headerShown: false>
      <PrayStack.Screen name="PrayScreen" component=PrayScreen />
    </PrayStack.Navigator>
  );


const PublicationStack = createNativeStackNavigator();
function PublicationStackScreen() 
  return (
    <PublicationStack.Navigator screenOptions=headerShown: false>
      <PublicationStack.Screen
        name="PublicationScreen"
        component=PublicationScreen
      />
    </PublicationStack.Navigator>
  );


const CollectionStack = createNativeStackNavigator();
function CollectionStackScreen() 
  return (
    <CollectionStack.Navigator screenOptions=headerShown: false>
      <CollectionStack.Screen
        name="CollectionScreen"
        component=CollectionScreen
      />
    </CollectionStack.Navigator>
  );


const Tab = createBottomTabNavigator();

export default function Navigation() 
  return (
    <NavigationContainer>
      <Tab.Navigator
        // This props not working
        initialRouteName="Profile"
        barStyle=backgroundColor: '#694fad'>
        <Tab.Screen name="Live" component=LiveStackScreen />
        <Tab.Screen name="Profile" component=ProfileStackScreen />
        <Tab.Screen name="Pray" component=PrayStackScreen />
        <Tab.Screen name="Publication" component=PublicationStackScreen />
        <Tab.Screen name="Collection" component=CollectionStackScreen />
      </Tab.Navigator>
    </NavigationContainer>
  );

【问题讨论】：

你能给我们一些代码sn-ps或更多细节吗？

@poPaTheGuru 我把 sn-ps

我刚试过initialRouteName，它按预期工作，但barStyle不是道具，你可能想试试tabStyle

【参考方案1】：

我知道为什么这个 sn-ps 不起作用。 我写了如下代码

initialRouteName="Profile"

但是我们必须像下面这样设置initialRouteName

 initialRouteName='Profile'

为了改变bottomTab的背景颜色，你应该像下面这样

 screenOptions=
      headerShown: false,
      tabBarStyle: backgroundColor: 'red',