react native Navigator使用踩的坑

发布时间：2020-12-15 06:48:07 所属栏目：百科来源：网络整理

导读：下载了个例子，真机安装，使用命令：react-native run-android 安装运行到手机上后总是白屏。例子的index.android.js如下： import React ,{ Component } from 'react' ; import { AppRegistry , Text , View , TouchableOpacity , StyleSheet , 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 installreact-native-deprecated-custom-components --save

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

3，总结获得

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

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

3）导航功能的使用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!