react native Navigator使用踩的坑

前端之家收集整理的这篇文章主要介绍了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 installreact-native-deprecated-custom-components --save

import { Navigator} from 'react-native-deprecated-custom-components'
3,总结获得

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

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

3)导航功能的使用。

猜你在找的React相关文章