React-native开发流程及问题整理
运行react-native出现的问题:
1、找不到Android-23 ,确定你sdk里边的内容是最新的,包含5.0及以上。
2、插入多个usb设备会导致安装失败,拔掉只留一个就好。
可以查看设备状态:(确认adb已经配置到path里边)
<pre name="code" class="java"><span style="font-size:18px;">$ adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device</span>
3、安装成功以后显示:(白屏看下边解决办法)
如果启动程序出现白屏,那么就可能是一下几种情况:
(1)、若出现下边情况:
dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
Watchman: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
ERROR watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
Error: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
at ChildProcess.<anonymous> (/Users/Jing/Projects/ReactNative/AwesomeProject/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:194:18)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:817:16)
at Socket.<anonymous> (internal/child_process.js:319:11)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)
是pcre找不到,通过如下命令即可修复:
$ brew uninstall pcre && brew install pcre
(2)、如果带一次运行都没有显示 加载js的那个界面,一般是你的手机悬浮窗选项被禁用了,
开启就好
(3)、如果实现加载js的界面,但是加载完以后还是白屏,没有显示welcome 。。。。。。的那个界面,那么说明还有问题
是 Server 访问错误。参考 官方文档 。对于 Android 5.0 及以上的设备,直接运行:
$ adb reverse tcp:8081 tcp:8081
我找来一个 Android 5.0 的机器,果然可以了。对于 5.0 以下的机器,上面的命令会出错:
$ adb reverse tcp:8081 tcp:8081 error: closed error: closed
4、错误Could not get BatchedBridge, make sure your bundle is packaged correctly
该错误具体原因不知道,但是可以解决,在项目的根目录下输入下边命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/
然后等命令执行完以后重新安装。
5、在开发的过程中会遇到修改了js代码以后reload还是以前的数据,卸载以后安装成功还是以前的界面,关于这个问题网上有很多的解决办法,经过试验,发现效果不是很理想;
(a)
尝试将这个文件:项目路径\node_modules\react-native\node_modules\node-haste\lib\FileWatcher\index.js中的MAX WAIT_TIME值改得更大一些;譬如由120000改成360000。运行packager的目的是让node开启一个服务来实时将我们项目的.js文件编译成功.jsbunde文件,我们可以通过 http://localhost:8081/index.Android.bundle?platform=android 来访问到这个文件。
运行react-native start后启动packager后,要保证MAX WAIT_TIME的值不小于上图语句的时间(红框)。因为每次启动服务所需时间都不同,所以如果不想修改MAX WAIT_TIME的话,可以多试几次启动服务,直到启动时间小于120000(默认值)为止
(b)如果上边的修改以后么有用,那么建议观点Packager 以及安装程序的命令行窗口,然后重新打开重新安装,还有就是注意文件一定要保存,否则也是没有用的。
6、使用手机跟Genymotion出现的问题:
7、现在补充一个折磨了我很久的问题,就是Reload以后界面没有变化的问题
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
const EventEmitter = require('events').EventEmitter;
const denodeify = require('denodeify');
const sane = require('sane');
const execSync = require('child_process').execSync;
const MAX_WAIT_TIME = 120000;
const detectWatcherClass = () => {
try {
execSync('watchman version', {stdio: 'ignore'});
return sane.WatchmanWatcher;
} catch (e) {}
return sane.NodeWatcher;
};
const WatcherClass = detectWatcherClass();
let inited = false;
class FileWatcher extends EventEmitter {
constructor(rootConfigs) {
if (inited) {
throw new Error('FileWatcher can only be instantiated once');
}
inited = true;
super();
this._watcherByRoot = Object.create(null);
const watcherPromises = rootConfigs.map((rootConfig) => {
return this._createWatcher(rootConfig);
});
this._loading = Promise.all(watcherPromises).then(watchers => {
watchers.forEach((watcher, i) => {
this._watcherByRoot[rootConfigs[i].dir] = watcher;
watcher.on(
'all',
// args = (type, filePath, root, stat)
(...args) => this.emit('all', ...args)
);
});
return watchers;
});
}
getWatchers() {
return this._loading;
}
getWatcherForRoot(root) {
return this._loading.then(() => this._watcherByRoot[root]);
}
isWatchman() {
return Promise.resolve(FileWatcher.canUseWatchman());
}
end() {
inited = false;
return this._loading.then(
(watchers) => watchers.map(
watcher => denodeify(watcher.close).call(watcher)
)
);
}
_createWatcher(rootConfig) {
const watcher = new WatcherClass(rootConfig.dir, {
glob: rootConfig.globs,
dot: false,
});
return new Promise((resolve, reject) => {
const rejectTimeout = setTimeout(
() => reject(new Error(timeoutMessage(WatcherClass))),
MAX_WAIT_TIME
);
watcher.once('ready', () => {
clearTimeout(rejectTimeout);
resolve(watcher);
});
});
}
static createDummyWatcher() {
return Object.assign(new EventEmitter(), {
isWatchman: () => Promise.resolve(false),
end: () => Promise.resolve(),
});
}
static canUseWatchman() {
return WatcherClass == sane.WatchmanWatcher;
}
}
function timeoutMessage(Watcher) {
const lines = [
'Watcher took too long to load (' + Watcher.name + ')',
];
if (Watcher === sane.WatchmanWatcher) {
lines.push(
'Try running `watchman version` from your terminal',
'https://facebook.github.io/watchman/docs/troubleshooting.html',
);
}
return lines.join('\n');
}
module.exports = FileWatcher;
可以看到
MAX_WAIT_TIME 的值是12000,那么这个值是干嘛的呢,看里边的代码可以发现他是用来判断是否检测到代码的改变
也就是当我们第一次Fetching js bundle 的时候在packager的命令行中的‘Crawling File System’与 ‘Building Dependency Graph
’的时间比较要小于<pre name="code" class="java" style="font-size: 18px; text-indent: 16px;">MAX_WAIT_TIME 的值
看截图:
关于其中代码编写也就是他的开发流程介绍:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';//导入react的组件
/**
*导入样式表,文本,View等
*
*/
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
//进行布局的书写
class FirstReactDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><Image
<span style="white-space:pre"> </span>source={{uri:'http://i.imgur.com/UePbdph.jpg'}}
<span style="white-space:pre"> </span>style={styles.thumbnail}
<span style="white-space:pre"> </span>/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
thumbnail:{
<span style="white-space:pre"> </span> width:80,
<span style="white-space:pre"> </span> height:80,
},
});
AppRegistry.registerComponent('FirstReactDemo', () => FirstReactDemo);
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react';//导入react的组件 /** *导入样式表,文本,View等 * */ import { AppRegistry, StyleSheet, Text, Image, View } from 'react-native'; //进行布局的书写 class FirstReactDemo extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> <Image source={{uri:'http://i.imgur.com/UePbdph.jpg'}} style={styles.thumbnail} /> <Text style={styles.instructions}> 测试是否改变!!! </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, thumbnail:{ width:80, height:80, }, }); AppRegistry.registerComponent('FirstReactDemo', () => FirstReactDemo);<span style="color:#ffffff;"> </span>
下边来对比俩个界面:看图:
没有添加最下边文本:
添加以后: