首页 > 解决方案 > 底部选项卡导航器未显示在主屏幕上(React Native)

问题描述

我想问一下为什么底部标签没有在主屏幕上显示(隐藏)这是我的代码

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';
import ApplyLoan from './screens/ApplyLoan';
import Profile from './screens/Profile';
import LoanHistory from './screens/LoanHistory';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';




export default class App extends React.Component  {
render()
{
return (
<AppContainer>
<RootNavigator/>
<MainTab/>
</AppContainer>
);
}
}


const RootNavigator = createStackNavigator({
loading: {
screen: Loading,
navigationOptions: {
  headerShown: false,
  headerTransparent: true,
  },
  },

欢迎:{屏幕:欢迎,navigationOptions:{ headerShown:false,headerTransparent:true,},},注册:{屏幕:注册,navigationOptions:{headerShown:false,headerTransparent:true,},},登录:{屏幕:登录, navigationOptions: { headerShown: false, headerTransparent: true, }, }, Home: { screen: Home, navigationOptions: { headerShown: false, headerTransparent: true, }, }, ForgotPassword: { screen: ForgotPassword, navigationOptions: { headerShown: false, headerTransparent: true, }, }, ApplyLoan: { screen: ApplyLoan, navigationOptions: { headerShown: false, headerTransparent: true, }, }, LoanHistory: { screen: LoanHistory, navigationOptions: { headerShown: false, headerTransparent: true, }, }, Profile: { screen: Profile, navigationOptions: { headerShown: false, headerTransparent: true, }, }, InitialRouteName : Loading });

常量 MainTab = createMaterialBottomTabNavigator(
{

  Home: { screen: Home,  
      navigationOptions:{  
          tabBarLabel:'Home',  
          tabBarIcon: ({ tintColor }) => (  
              <View>  
                  <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>  
              </View>),  
      }  
  },  
  Profile: { screen: Profile,  
      navigationOptions:{  
          tabBarLabel:'Profile',  
          tabBarIcon: ({ tintColor }) => (  
              <View>  
                  <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>  
              </View>),  
          activeColor: '#f60c0d',  
          inactiveColor: '#f65a22',  
          barStyle: { backgroundColor: '#f69b31' },  
      }  
  },  

},
{
initialRouteName: "Home",
activeColor: '#f0edf6',
inactiveColor: '#226557',
barStyle: { backgroundColor: '#3BAD87' },
},
);

const AppContainer = createAppContainer(RootNavigator, MainTab);

我的代码有问题吗?

标签: reactjsreact-nativeexpo

解决方案


推荐阅读