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

Question

我制作了一个 Navigation 组件并将所有屏幕放入其中。它运行良好，但 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>
  );
}

Answer 1

我知道为什么这个片段不起作用。我写了如下代码

initialRouteName="Profile"

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

 initialRouteName={'Profile'}

要更改 bottomTab 的背景颜色，您应该像下面那样做

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

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

Props in Tab.Navigation react navigation not working

react-native

react-navigation