频道导航

react native Navigator使用踩的坑

2020-06-16 React 前端之家

前端之家收集整理的这篇文章主要介绍了react native Navigator使用踩的坑，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

例子的index.android.js如下：

 
 @H_404_5@ 
  import 
  React,{ 
  Component} 
  from 
  'react'; 
 

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

@H_404_5@ import DemoView from './CommonJS/DemoView'

@H_404_5@ import TestView from './CommonJS/TestView'

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

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

@H_404_5@ class MyProject extends Component {

@H_404_5@ renderScene( router,navigator) {

@H_404_5@ switch ( router. component) { @H_404_5@ case 'Home': @H_404_5@ return ( @H_404_5@ < View style={ Styles. View} > @H_404_5@ < TouchableOpacity onPress={() => navigator. push({ component: 'Test'})} > @H_404_5@ < Text style={ Styles. Button} >Test </ Text > @H_404_5@ </ TouchableOpacity > @H_404_5@ < TouchableOpacity onPress={() => navigator. push({ component: 'Demo'})} > @H_404_5@ < Text style={[ Styles. Button,Styles. UnderButton]} >Demo </ Text > @H_404_5@ </ TouchableOpacity > @H_404_5@ </ View >); @H_404_5@ case 'Demo': @H_404_5@ return ( < DemoView navigator={ navigator} />); @H_404_5@ case 'Test': @H_404_5@ return ( < TestView navigator={ navigator} />); @H_404_5@ case 'Loading': @H_404_5@ return ( < Loading navigator={ navigator} />); @H_404_5@ case 'MovieList': @H_404_5@ return ( < MovieList navigator={ navigator} />); @H_404_5@ } @H_404_5@ }
@H_404_5@ render() { @H_404_5@ return ( @H_404_5@ < Navigator @H_404_5@ style={{ flex: 1}} @H_404_5@ initialRoute={{ component: 'Home'}} @H_404_5@ renderScene={ this. renderScene} @H_404_5@ configureScene={( route,routeStack) => Navigator. SceneConfigs. FadeAndroid} /> @H_404_5@ ); @H_404_5@ } @H_404_5@ }
@H_404_5@ var Styles = StyleSheet. create({ @H_404_5@ View: { @H_404_5@ flex: 1, @H_404_5@ flexDirection: 'column', @H_404_5@ justifyContent: 'center', @H_404_5@ alignItems: 'center', @H_404_5@ }, @H_404_5@ Button: { @H_404_5@ fontSize: 30, @H_404_5@ backgroundColor: 'skyblue', @H_404_5@ width: 150, @H_404_5@ height: 50, @H_404_5@ textAlign: 'center', @H_404_5@ UnderButton: { @H_404_5@ marginTop: 40, @H_404_5@ } @H_404_5@ })
@H_404_5@ 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 installreact-native-deprecated-custom-components --save

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

3，总结获得

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

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

3）导航功能的使用。