Question

我遇到了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>
        );
      }
    }

我确定它适用于第一个切换的情况，但屏幕空白，我不知道原因。

Answer 1

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

删除标签导航不能包含在标签中，就像这样。

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

          {this.renderInitialView()}

      </Provider>
    );
  }
}

这将有用。

react-navigation选项卡导航器屏幕的内容未显示/屏幕为空白问题

1 个答案: