Блог

Я добавил компонент панели вкладок в свой проект и перешел к нему из простого компонента, но проблема в том, что появляется панель навигации, но я не могу изменить какое-либо свойство панели навигации. Пожалуйста, помогите с этим.

Я попробовал прямую навигацию, а затем панель навигации работает без элементов в нижней части вкладки

 
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; 

  

Вы должны указать стиль опции, который выполняется на каждой вкладке.

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