react native Navigator使用踩的坑

下载了个例子，真机安装，使用命令：react-native run-android 安装运行到手机上后总是白屏。

例子的index.android.js如下：

import React, { Component} from 'react';

import { AppRegistry, Text, View, TouchableOpacity, StyleSheet, Navigator} from 'react-native';

import DemoView from './CommonJS/DemoView'

import TestView from './CommonJS/TestView'

import Loading from './CommonJS/Demo/Loading'

import MovieList from './CommonJS/Demo/MovieList'

class MyProject extends Component {

renderScene( router, navigator) {

switch ( router. component) {

case 'Home':

return (

< View style={ Styles. View} >

< TouchableOpacity onPress={() => navigator. push({ component: 'Test'})} >

< Text style={ Styles. Button} >Test </ Text >

</ TouchableOpacity >

< TouchableOpacity onPress={() => navigator. push({ component: 'Demo'})} >

< Text style={[ Styles. Button, Styles. UnderButton]} >Demo </ Text >

</ TouchableOpacity >

</ View >);

case 'Demo':

return ( < DemoView navigator={ navigator} />);

case 'Test':

return ( < TestView navigator={ navigator} />);

case 'Loading':

return ( < Loading navigator={ navigator} />);

case 'MovieList':

return ( < MovieList navigator={ navigator} />);

}

}

render() {

return (

< Navigator

style={{ flex: 1}}

initialRoute={{ component: 'Home'}}

renderScene={ this. renderScene}

configureScene={( route, routeStack) => Navigator. SceneConfigs. FadeAndroid} />

);

}

}

var Styles = StyleSheet. create({

View: {

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'center',

},

Button: {

fontSize: 30,

backgroundColor: 'skyblue',

width: 150,

height: 50,

textAlign: 'center',

},

UnderButton: {

marginTop: 40,

}

})

AppRegistry. registerComponent( 'MyProject', () => MyProject);

解决方法：

1，首先解决白屏的问题

手机上打开app后白屏，摇一摇也没有开发者菜单：手机设置——》“其他应用管理”——》找到刚安装的应用程序，并打开——》“权限管理”——》“显示悬浮框”；

此时重启app，再摇一摇就可以出来开发者菜单，在开发者菜单中启动远程调试，可以看到程序输出的错误：

'Navigator is deprecated and has been removed from this package. It can now be installed  and imported from `react-native-deprecated-custom-components` instead of `react-native`. 

2，解决导航问题

npm install react-native-deprecated-custom-components --save

import { Navigator} from 'react-native-deprecated-custom-components'

3，总结获得

1）解决了摇一摇无法出现开发者菜单的问题；

2）实现了使用谷歌浏览器结合真机进行远程调试的方法，可设置断点跟踪调试；

3）导航功能的使用。