#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. все еще не отображается, хотя я уже разделил нижнюю вкладку