Нижний навигатор вкладок не отображается на главном экране (React Native)

#reactjs #react-native #expo

#reactjs #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,
  },
  },
  

Добро пожаловать: {
экран: Добро пожаловать,
параметры навигации: {
Отображение заголовка: false,
Отображение заголовка: true,
},
},
регистрация: {
экран: регистрация,
Параметры навигации: {
Заголовок отображается: false,
Заголовок прозрачен: true,
},
},
вход в систему: {
экран: вход в систему,
Параметры навигации: {
Заголовок: false,
Заголовок прозрачен: true,
},
},
Главная страница: {
экран: Главная страница,
Параметры навигации: {
Заголовок отображается: false,
Заголовок прозрачен: true,
},
},
забытый пароль: {
экран: забытый пароль,
Параметры навигации: {
Заголовок отображается: false,
Заголовок прозрачен: true,
},
},
ApplyLoan: {
экран: ApplyLoan,
Параметры навигации: {
Заголовок отображается: false,
Заголовок прозрачен: true,
},
},
LoanHistory: {
экран: LoanHistory,
Параметры навигации: {
Отображение заголовка: false,
Отображение заголовка: true,
},
},
Профиль: {
экран: профиль,
Параметры навигации: {
Заголовок: false,
Заголовок прозрачен: true,
},
},
InitialRouteName : загрузка
});

const 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);

Что-то не так с моим кодом?

Комментарии:

1. Как насчет других экранов? Они работают так, как ожидалось? Можете ли вы сообщить мне свою версию навигации react?

2. моя версия навигации для реакции — 4.4.1

3. навигатор стека работает. Только нижний навигатор вкладок не работает вообще. Я хочу, чтобы на самом деле отображался на главном экране (или на панели инструментов)

4. Я думаю, вам следует обновить версию навигации до последней версии, т.е. v-5

5. все еще не отображается, хотя я уже разделил нижнюю вкладку