反应导航器空白屏幕

Question

我试图使用反应导航器与反应原生，但我只得到一个空白的屏幕，没有错误。这里有什么问题？

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

尝试在您的MainScreen中添加一个高度。

做这样的事情：

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; 

U可以用这个目的地Documentation

static navigationOptions = { 
    title: 'Home', 
    }