反應本地路由器通量不顯示屏幕

我有一個視圖，我試圖通過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：

請幫助。

來源

2017-07-14 Rahul Bhardwaj

同樣在這裏。試圖研究源代碼... –

我不認爲是無狀態的組件的問題，我加了Flexbox的造型到<View>組件包圍繞<RouterComponent>，它適用於我的Android模擬器，只需刪除圍繞<RouterComponent>的<View>包裝也可以工作：

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

來源

2017-07-17 04:54:51 dotcomXY

謝謝:)。你能否詳細說明爲什麼View導致這個問題？我覺得有點奇怪。我認爲View是一個容納組件的容器。 :( –

男人......我不能說我多麼感激我花了大約7個小時試圖弄清楚我的代碼出了什麼問題 –

這是瘋了。花費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;

來源

2017-07-17 01:57:02

應用程序中的視圖標籤是罪魁禍首。 –

剛剛在View中添加了flexbox樣式的換行組件RouterComponent。這個想法也是在我的Android模擬器中工作。或者你可以刪除組件View喜歡：

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

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

我希望思想可以幫助你。

來源

2017-07-17 05:29:07 muhammadaa

反應本地路由器通量不顯示屏幕

回答

相關問題