Question

我在项目中添加了一个标签栏组件，并且已经从简单组件导航到该组件，但是问题是导航栏即将到来，但我无法更改导航栏的任何属性。请帮忙。

我尝试了直接导航，然后导航栏在没有选项卡底部项目的情况下正常工作


import React, { Component } from "react";
import { View } from "react-native";
import { Container, Content, Picker, Button, Text } from "native-base";
import { createBottomTabNavigator,createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreenCompo from './HomeScreenCompo';
import LoginComponent from './LoginComponent';
import ProductListingComponent from './ProductListingComponent';
import ProfileScreenComponent from './ProfileScreenComponent';
import IntroScreenComponent from './IntroScreenComponent';
import SplashComponent from './SplashComponent';



const TabNavigator1 = createBottomTabNavigator({
                                                  Home: {      
                                                        screen: HomeScreenCompo,     
                                                        navigationOptions: {       
                                                         title:'Home', 
                                                          headerTitle: "Tab 1 Screen"      
                                                        }    
                                                  }  , 
                                                  Product:{
                                                        screen: ProductListingComponent,      
                                                        navigationOptions: {     
                                                         title:'Product',     
                                                          headerTitle: "Tab 1 Screen"      
                                                        }    
                                                  }  , 
                                                  Profile:{      
                                                        screen: ProfileScreenComponent,      
                                                        navigationOptions: {     
                                                         title:'Profile',     
                                                          headerTitle: "Tab 1 Screen"      
                                                        }  
                                                  }
                      });






const HomeTabBarComponent = createAppContainer(TabNavigator1);

export default HomeTabBarComponent;

App.js


import React, { Component } from "react";
import { View } from "react-native";
import { Container, Content, Picker, Button, Text } from "native-base";
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'; 
import SplashComponent from './SplashComponent';
import IntroScreenComponent from './IntroScreenComponent';
import LoginComponent from './LoginComponent';
import HomeScreenCompo from './HomeScreenCompo';
import HomeTabBarComponent from './HomeTabBarComponent';
import ProfileScreenComponent from './ProfileScreenComponent';



import {createStackNavigator} from 'react-navigation';

const MainNavigator = createStackNavigator({
  Splash: {screen: SplashComponent},
  Intro: {screen: IntroScreenComponent},
  Login: {screen: LoginComponent }, 
  Home: {screen: HomeTabBarComponent}, 
});

const App = createAppContainer(MainNavigator);

export default App;

Answer 1

您必须指定在每个选项卡上运行的选项样式。

tabBarOptions: {
        activeTintColor: "blue",
        inactiveTintColor: "gray"
      }

带有导航栏的选项卡栏组件不会更改导航栏的颜色

1 个答案: