反应本地路由器通量不显示屏幕

我有一个视图，我试图通过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

反应本地路由器通量不显示屏幕

回答

相关问题