反应本机路由器磁通不显示屏幕

Question

我有一个视图,我试图通过react-native-router-flux模块加载.

但是,它没有在模拟器上显示屏幕.但是,我可以在react-dev工具中看到我的组件.

Android模拟器上没有看到任何错误,只有空屏幕.细节如下:

Test.js:

import React from 'react';
import { Text, View } from 'react-native';

const Test = () => {
    return (
         <View style={{margin: 128}}>
      <Text>This is PageTwo!</Text>
      </View>
    );
};

export default Test;

我的路由器:Router.js

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import Test from './components/Test';

class RouterComponent extends Component {
  render() {
    return (
      <Router>
        <Scene key="root" >
          <Scene key="pageOne" component={Test} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={LoginForm} title="PageOne" initial={false} />
        </Scene>
      </Router>
    );
  }
}

export default RouterComponent;

我的App Loader:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import RouterComponent from './Router';
import LoginForm from './components/LoginForm';

class App extends Component {
    componentWillMount() {
        // Initialize Firebase

    }
    render() {
        return (
            <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
                <View>
                    <RouterComponent />
                </View>
            </Provider>
        );
    }
}

export default App;

Android模拟器屏幕:

React开发工具:

的package.json:

请帮忙.

Answer 1

我不认为是无状态组件的问题,我在<View>组件周围添加了一个flexbox样式<RouterComponent>,它可以在我的Android模拟器上运行,只需删除<View>周围的包装<RouterComponent>也可以:

class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
        <View style={{ flex: 1 }}>
          <RouterComponent />
        </View>
      </Provider>
    );
  }
}