ReactネイティブルータFluxが画面を表示しない

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; 

マイアプリのローダ：

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のエミュレータ画面を：

は、開発ツールに反応：

Package.json：

助けてください。

Answer 1

私はステートレスなコンポーネントの問題であるとは思わない、私はラップ<View>コンポーネントにフレキシボックスのスタイリングを追加しました

0123： <RouterComponent>周り、それもうまくいく単純 <RouterComponent>周り <View>ラッパーを取り除く、私のAndroidのエミュレータ上で動作します

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

Answer 2

これは非常識です。 2時間のデバッグを費やしました。コンポーネントがステートレスであるべきではないことが分かったので、それをComponentに拡張するクラスとして定義する必要があります。

は、だからあなたの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; 

だけで実行します。

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

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

export default Test; 

Answer 3

ラップコンポーネントRouterComponentの場合はViewにフレックスボックススタイリングを追加しました。私のAndroidエミュレータでもこのアイデアはうまくいきます。私はアイデアがあなたを助けことを願って

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

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

： それとも、のようなコンポーネントViewを削除することができます。