使用过的组件及API
KeyboardAvoidingView、View、ListView、Navigator、RefreshControl、ScrollView、Text、TextInput、TouchableHighlight、WebView、Alert、AppRegistry、AsyncStorage、BackAndroid、Dimensions、Keyboard、StyleSheet、Platform、Picker、Geolocation、InteractionManager、Vibration
初始化工程
react-native init ProjectName 初始化的工程。
react-native init ProjectName --version 0.42.0 初始化指定版本react-native工程。
工程重命名：工程代码中有工程名称，所有不好直接给工程重命名，可能需要重新初始化一个项目，然后将代码复制过去。
如果要修改App显示名称，将/android/app/src/main/res/values/strings.xml 中修改app_name改为想要的名字即可。
启动项目
react-native run-android 在android启动项目，如果运行在真机，需要摇晃手机调出开发者菜单->Dev Settings->Debug server host for device，进行IP和端口的设置。
react-native run-ios 在ios启动项目。
无论是运行上面哪个命令，都会打开一个启动package服务的命令行窗口，如果没有打开这个窗口，请用react-native start手动启动package服务，react-native start --port XXXX 开启服务的时候直接指定端口号。
如何使用 Ant Design Mobile
npm install antd-mobile --savenpm install babel-plugin-import --save-dev- .babelrc中配置如下
{
"presets": [
"react-native"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile"
}
]
]
}
如何使用图标
Android上直接使用Ant Design Mobile的Icon组件没有效果，个人感觉Icon只支持移动Web。如果想使用图标，目前用过两种方式：
- 将Iconfinder中图标的Base64编码值定义为变量，在使用地方的uri值指定为该变量。该网站上比较容易找到配套图标，就是点击和未点击配套的图标，但是不能改变图标颜色。
- 使用FontAwesome，配置方式详见react-native-vector-icons。使用该图标可通过style指定图标样式，包括颜色，但要找配套的图标比较困难。
注意FontAwesome中描述<i class="fa fa-user" aria-hidden="true"></i>使用图标，这应该是移动Web的使用方式，在React Native中使用如下。
import Icon from 'react-native-vector-icons/FontAwesome';
...
<Icon name="user" size={20} style={styles.icon} />
如何设置样式
StyleSheet提供了一种类似CSS样式表的抽象。const styles = StyleSheet.create()传入样式定义的对象，该对象键为样式名称，值为定义样式的对象。使用时通过styles的键名即可引用到对应的样式。也可以使用内联样式，但比较低效，内联样式对象会在每一个渲染周期都被重新创建。
Stylesheet.Create方法是可选的，但有一些重要的优势。它保证了值是不可变的，并且通过将它们转换成指向内部表的纯数字，保持了代码的不透明性。将它们放在文件的末尾可保证它们在应用中只会被创建一次，而不是每一次渲染周期都被重新创建。
我在RN工程中定义了styles目录，将每个组件引用的样式单独定义成组件同名的文件放在该目录，想要做到样式独立管理，但有些样式可能是根据组件中的一些属性定义的，还是不可避免的要放到组件定义的文件中。
React Native支持部分样式属性，不同的组件有些样式属性也是不能使用的，会报红屏错误。下面是在源码中添加console.log打印出的可用的样式属性。
Valid style props: [
"alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"elevation",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"
]
如果当前元素的父元素没有使用弹性盒模型，也就是没有flex属性，则只给当前元素flex属性是不起作用的。
文字可以用'\n'换行，如<Text>这是内容...{'\n'}这是内容...</Text>。
Navigator组件的使用
Navigator是React Native提供的路由管理的组件，通常一个工程中只有一个Navigator组件，个人感觉放在index.android.js文件中比较好，还有对物理返回键BackAndroid的管理最好也放在这里，常用的就是push和pop方法，push时可传入参数。具体使用方法参见React Native中文网-Navigator即可。
- 使用时好像必须作为render的根组件返回，即使外面包层View，都不会有显示内容
- 如果在TabBar.Item中返回的Navigator组件，路由切换时页面底部的TabBar一直存在
- navigator需要作为属性一直向下传递，否则子组件无法引用
ListView组件的使用
ListView是React Native核心组件，使用时注意以下几点。
- ListView最好添加enableEmptySections属性，处理ListView没有显示数据时报的黄色警告。
- 如果发现列表没滑倒底部就调用onEndReached回调方法了，可以试试设置onEndReachedThreshold值。
- 如果在onEndReached回调方法中进行的是获取更多数据的操作，注意判断条件是否正确，如当前页数已为最大页数或数据已达到总条数，如果还继续执行获取数据操作，有可能导致一直执行获取数据的操作，就像死循环一样。
TouchableHighlight的使用
使用时建议里面包裹React Native提供的组件，而不要使用自定义的组件，否则会报
Touchable child must either be native or forward setNativeProps to a native component.的错误信息。如果非要使用自定义组件，需要给自定义组件添加setNativeProps方法，参见React Native中文网-直接操作。
网络请求
可直接使用React Native已经封装好的fetch。查看了react-native的package.json文件，在依赖中与fetch相关的只有node-fetch和whatwg-fetch，在node-fetch和whatwg-fetch中都添加了打印语句，发现打印的都是来自whatwg-fetch的。但在《React Native跨平台移动应用开发》书中第12章提到，“React Native框架在初始化项目时，安装了node-fetch包，开发者可以使用node-fetch包通过HTTP协议来获取网络册的数据”。
组件间交互
React Native用起来感觉跟React差不多，目前发现复杂的地方还是组件间的交互问题。如对于如下结构的组件
A
|
--------+---------
| |
| |
B-------+--------C
|
D
场景描述：A拥有B、C组件，B、C组件都会进入D组件，在D组件中需要调用B、C中的方法。
解决方案：我使用的方法是给A的state添加两个属性methodB、methodC，初始可为null，添加一个可以更新state的方法update，将methodB、methodC、update一起传入B、C中，在B、C组件调用update方法将methodB和methodC赋值给A的同名state属性，这样在D中就可调用到B和C的方法了。
Redux支持
跟React使用redux是一样的，在用浏览器的调试工具进行redux调试时，需要特殊处理。目前Windows上是安装remote-redux-devtools的0.5.0版本，在react-native为0.34.0时是好使的，但是react-native为0.42.0时就不好使了，感觉应该是目前还不支持0.42.0。
安装依赖
npm install --save-dev remote-redux-devtools@0.5.0
npm install --save-dev remote-redux-devtools-on-debugger
package.json里添加
"scripts": {
"postinstall": "remotedev-debugger --hostname localhost --port 5678 --injectserver"
}
configureStore.js修改
import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';
export default function configureStore(initialState) {
const enhancer = compose(
applyMiddleware(thunk),
devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
})
);
return createStore(reducer, initialState, enhancer);
}
启动
npm run postinstall
react-native run-android
Webpack支持
Webpack有一段介绍如下：
Webpack是Web前端打包的工具，不是用在移动端的。如果要在浏览器上运行React Native项目，就需要Webpack了。
运行在Web浏览器上面
参考三步将 React Native 项目运行在 Web 浏览器上面或者Ant Design Mobile的MobileDemo怎么在Web端运行的。
注意：
- react、react-dom 版本为15.3.x，否则可能会报错
- webpack.config.js中要有publicPath，如下说是，否则可能会报错
output:{
publicPath:'',
path: path.join(__dirname, 'output'),
filename: 'bundle.js'
},
已经按照教程测试过，简单的组件可以跑在浏览器上，可以使用浏览器的React调试工具看组件的结构。使用React Native的StyleSheet定义的样式在Web端也生效，可以使用div等html的标签。
但是我现在还不明白React Native 项目运行在Web浏览器上面是为了方便测试，还是为了一套代码可以运行在三端。像我测试中用的React Native的Button组件在浏览器上显示是占满屏幕整个宽度的，还有进行网络请求用的fetch报错了。不是简单的一套代码就能运行在三端，但是个人感觉样式和redux的部分是可以公用的，可能显示组件需要调整。
组件不显示
如果组件没显示出来，还没有报错，可鞥是组件外层没有高度，换成ScrollView或者显示指定height试试。
初始化的项目启动报错
在一个目录下执行react-native init project_name 初始化了一个项目，能跑起来。但换个目录再执行 react-native init project_name 初始化同名项目，即使什么都没修改，也可能跑不起来，会报如下错误。但换个目录可能就能跑起来了，很奇怪。
在网上查了很多都没有找到原因，github上也有人发现类似问题。
这时请确认是否使用了babel-plugin-transform-runtime依赖及使用是否正确，很有可能是这个依赖导致的，如果没用可以去掉。我在去掉之后再没有发现这个问题。
项目启动报错
如果项目启动时报Could not find com.atlassian.mobile.video:okhttp-ws-compat:3.7.0-atlassian1.错误，在android/build.gradle文件中，allprojects中添加如下代码即可。
...
allprojects {
repositories {...}
configurations.all {
resolutionStrategy {
eachDependency { DependencyResolveDetails details ->
if (details.requested.group == 'com.facebook.react' && details.requested.name == 'react-native') {
details.useVersion "0.42.0" // Your real React Native version here
}
}
}
}
}
...
平台扩展名及平台检测
React - Native InteractionManager 动画交互管理器
链接原生
react-native link -- 链接所有原生依赖
react-native link xxx -- 链接某个原生依赖
react-native unlink xxx -- 取消对某个原生依赖的链接
