React-native开发流程及问题整理
关于React-native环境的搭建可也看这个：http://blog.csdn.net/u012808234/article/details/52692801
运行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出现的问题：
如果使用手机的话经常遇到 “Could not connect to development server”,
这是因为无法连接到开发服务器，通常解决的方式在错误界面都有介绍了：
（1）查看packager是开开启
（2）查看adb设备是否连接 在命令行打 adb devices （adb环境一定要配置到path中）
（3）如果一切正常 运行 adb reverse tcp:8081 tcp:8081
（4）如果是用无线进行连接，那么在dev setting 中设置 你的电脑的ip地址。
通常就是这些问题，有的时候可能还必须重新启动packager服务才行，然后重新运行
如果是用使用Genymotion 的话，那么你就要注意了，安装他应该是没有任何难度，
安装完成以后，打开Genymotion 的设置界面：
换成自己的sdk中的adb，要不然死活找不到虚拟设备。
然后打开虚拟设备以后，运行程序以后，修改代码以后如何reload 呢，windows系统的话：ctrl + m或者 按俩次R 或者是点击Genymotion上边的menu按钮（如果找不到的话那么就把模拟器拉长，让他把所有的按钮都显示出来）， 如果是mac 的话：commond + m 。
7、现在补充一个折磨了我很久的问题，就是Reload以后界面没有变化的问题
刚开始没有特别注意，但是项目经常不能刷新界面，很郁闷，网上查过很多以后发现原来就是E:\RectNative\react-nativeWork\Demo1\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js
的问题。
这是我的项目index.js的位置，
/**
* 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 的值
看截图：
可以发先我的这个时间很长，那么要想Reload以后能看到改变，那么就使劲往大了修改，比如改成1360000，这样基本不会有问题了，然后按ctrl +c 退出packager，然后重启Packager，在重新Relaod，就正常了。
关于其中代码编写也就是他的开发流程介绍：
上边项目可以运行起来了，那么就可能进行接下来我们自己来编写的过程了：
首先我们要知道我们对于react-native开发基于的语言有了解，他是基于JavaScript，所以我们能想的到控件的编写，界面等等都是在js里边进行的
看下他里边的代码：
/**
* 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);
里边包含了样式，还有显示的view的初始化已经设置文本内容。
下边贴上我修改以后的效果界面
/** * 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>
下边来对比俩个界面：看图： 没有添加最下边文本： 
添加以后： 
7852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
