Навигатор вкладки React-Navigation Содержимое экранов не отображается / экраны пустые

У меня проблема с навигатором по вкладкам React-Navigation. Содержимое экранов не отображается / экраны пустые. Любые идеи ? Это моя структура навигатора:

import { StackNavigator, TabNavigator } from 'react-navigation';
import PeopleList from './PeopleList';
import CompanyList from './CompanyList';
import AddPerson from './AddPerson';
const Navigation = TabNavigator({
  People: { screen: PeopleList },
  Person: { screen: AddPerson },
  Company: { screen: CompanyList },
 }, {
 tabBarOptions: {
  activeTintColor: 'white',
  inactiveTintColor: '#80cbc4',
  swipeEnabled: true,
  showLabel: false,
  style: {
    backgroundColor: '#26a69a',
  },
 },
});
export default Navigation;

ОБНОВИТЬ:

это файл App.js, который включает методы рендеринга:

    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';
    import firebase from 'firebase';
    import {Provider} from 'react-redux';
    import {createStore} from 'redux'
    import Login from './Login';
    import Loader from './Loader';
    import Navigation from './Navigation';
    import reducers from '../reducers/PeopleReducer';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }
    });

    const store = createStore(reducers);

    export default class App extends Component {
      state = {
        loggedIn: null
      };

      componentWillMount() {
        firebase.initializeApp({
          apiKey: "xxxxxxxxxxxxxxxxxxx",
          authDomain: "xxxxxxxxxxxxxxxxxxx",
          databaseURL: "xxxxxxxxxxxxxxxxxxx",
          projectId: "xxxxxxxxxxxxxxxxxxx",
          storageBucket: "xxxxxxxxxxxxxxxxxxx",
          messagingSenderId: "xxxxxxxxxxxxxxxxxxx"
        });

        firebase
          .auth()
          .onAuthStateChanged((user) => {
            if (user) {
              this.setState({loggedIn: true});
            } else {
              this.setState({loggedIn: false});
            }
          });
      }

      renderInitialView() {
        switch (this.state.loggedIn) {
          case true:
            return <Navigation/> /*exists above*/
          case false:
            return <Login/>;
          default:
            return <Loader size="large"/>;
        }
      }
      render() {
        return (
          <Provider store={store}>
            <View style={styles.container}>
              {this.renderInitialView()}
            </View>
          </Provider>
        );
      }
    }

Я уверен, что это относится к первому случаю переключения, но у меня пустой экран, и я не знаю причины.


person Mahmoud Elshafaey    schedule 27.07.2017    source источник
comment
включить ваши методы рендеринга   -  person Khalil Khalaf    schedule 28.07.2017


Ответы (1)


render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          {this.renderInitialView()}
        </View>
      </Provider>
    );
  }
}

удалить тег, навигация не может быть заключена в тег, как это.

render() {
    return (
      <Provider store={store}>

          {this.renderInitialView()}

      </Provider>
    );
  }
}

тогда это будет работать.

person Muhammad Haris Baig    schedule 03.08.2017
comment
на самом деле проблема в том, что у представления контейнера есть justifyContent: 'center', спасибо за ваш ответ - person Mahmoud Elshafaey; 03.08.2017
comment
Я столкнулся с той же проблемой, но удалив тег ‹View›, tabBar виден, но не выровнен должным образом? Скажите, пожалуйста, мне следует удалить justifyContent? или любое другое решение? - person Muhammad Haris Baig; 04.08.2017
comment
просто удалите атрибуты justifyContent и alignItems контейнера, в них нет необходимости, это работает для меня - person Mahmoud Elshafaey; 05.08.2017
comment
^^ почему это причина? Я согласен, что это причина. После того, как я удалил его, мой контент отобразился. - person imbatman; 10.11.2017