反应导航器空白屏幕

Question

我正在尝试将 React Navigator 与 React Native 结合使用，但我只得到一个空白屏幕，没有任何错误。这里有什么问题？

import React, { Component } from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class MainScreen extends Component {
  render() {
    return (
      <Button
        title="Success"
      />
    );
  }
}

const AppNavigator = StackNavigator(
  {
    Index: {
      screen: MainScreen
    }
  },
  {
    initialRouteName: 'Index',
    headerMode: 'none'
  }
);

export default AppNavigator;

Answer 1

尝试为您的主屏幕添加高度。

做类似的事情：

return (
  <View style={{ flex: 1 }}>
    <Button
      title="Success"
    />
  </View>
);

Answer 2

我好像忘了注册主要的应用程序组件。我添加了 AppRegistry.registerComponent('MyApp', () => AppNavigator); 并且有效。

Answer 3

正在使用

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';

class MainScreen extends Component {
  render() {
    return (
      <AppNavigator/> //this is for starting routing
    );
  }
}

const AppNavigator = StackNavigator(
  {
    Index: {
      screen: MainScreen
    }
  },
  {
    initialRouteName: 'Index',
    headerMode: 'none'
  }
);

export default MainScreen;

你可以用它作为目的地 Documentation

 static navigationOptions = {
    title: 'Home',
  }

反应导航器空白屏幕

React navigator blank screen

reactjs

react-native

react-navigation