下载了个例子,真机安装,使用命令: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,总结获得
2)实现了使用谷歌浏览器结合针灸进行远程调试的方法,可设置断点跟踪调试;
3)导航功能的使用。
原文链接:https://www.f2er.com/react/302756.html