React Native Router 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模拟器屏幕：

React开发工具：

Package.json文件：

请帮忙。

- Rahul Bhardwaj

---

一样。正在尝试学习源代码... - Fancy John

Answer 1

我认为这不是无状态组件的问题，我给包裹 <RouterComponent> 的 <View> 组件添加了 flexbox 样式，它在我的 Android 模拟器上正常工作。如果简单地移除 <RouterComponent> 外层的 <View> 包装器也可以解决问题：

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

- dotcomXY

---

谢谢 :)。您能否详细说明为什么View会引起问题？我觉得有点奇怪。我以为View就像一个容器来容纳组件。:( - Rahul Bhardwaj

哇...我无法表达我有多感激。我花了大约7个小时来弄清楚我的代码出了什么问题。 - Guilherme Lúcio

Answer 2

在app.js中我们经常使用

container: {
    backgroundColor: '#455e64',
    flex : 1,
    alignItems: 'center',
    justifyContent: 'center',
  }

alignItems: 'center',

如果我们想得到相同的错误，只需要从样式中删除alignItems:'center'就可以解决问题。

container: {
    backgroundColor: '#455e64',
    flex : 1,
    justifyContent: 'center',
  }

- Parveen Chauhan

Answer 3

这简直太疯狂了。调试了两个小时。最终发现组件不能是无状态的，必须将其定义为一个扩展了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;

- Fancy John

---

App中的视图标签是罪魁祸首。 - Rahul Bhardwaj

Answer 4

刚刚为RouterComponent的包装组件添加了flexbox样式到View中。这个想法也在我的Android模拟器上运行良好。 或者你可以像这样删除View组件：

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

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

希望这个想法能对你有所帮助。

- manggaraaaa