关于ReactNative的安装配置这里不再赘述，官网上描述的很详细了。
程序入口
这里都会以Android为例，根据ReactNative的思想，Android iOS构建思想是一样的，所以，接下来说的也都适用于iOS。
入口文件
首先肯定是要新建一个项目
react-native init ProjectName默认项目中已经添加好一个js文件，index.ios.js或是 index.android.js
而项目中的工程默认使用的也是这个文件。
文件中的代码：
export default class xxx extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to qq!
</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>
</View>
);
}
}这段代码是码定义了一个名为xxx的新的组件（Component）在最后一行有如下一段代码：
AppRegistry.registerComponent('xxx', () => xxx);这是使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。
AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。
然后打开Android工程可以看一下，在Activity中：
@Override
protected String getMainComponentName() {
return "xxx";
}这个xxx就是你在js中注册的组件，也就是上面提到过的用AppRegistry注册的组件。
屏幕像素相关
提到设备像素和密度，就需要引入两个类，这里先看一下代码：
import React, {
Dimensions,
PixelRatio,
} from 'react-native';
export default {
"pixelRatio" : PixelRatio.get(),
"width" : Dimensions.get('window').width,
"height" : Dimensions.get('window').height,
}根据代码可以看出，我们引入了两个类Dimensions和PixelRatio。一个一个说:
PixelRatio
这个是用来访问设备的像素密度的。介绍一下这个类中的方法
-
get
这个是我上面代码中提到的，它返回的是返回设备的像素密度。
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S iPhone 5, 5c, 5s iPhone 6 xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5 Nexus 6
根据设计方案的基准值，加上以上得到的值，可以进行显示界面的适配。 -
getPixelSizeForLayoutSize将一个布局尺寸(dp)转换为像素尺寸(px)，只能返回整数值。
Dimensions
本模块用于获取设备屏幕的宽和高。如上面demo中的例子所示。这里不再做过多的赘述。
Js调用native方法
关于这里我一直在考虑怎么能说的更清楚，也写了一些了例子，但是，仍然觉得没有这个网站说的清楚，好吧，我还是把链接粘贴过来js调用android:http://reactnative.cn/docs/0.45/native-modules-android.html#content
js调用iOS:http://reactnative.cn/docs/0.45/native-modules- ios.html#content
# 总结
之前做过React Native的相关调研，也研究过一些demo，后来由于项目问题，没能使用，时隔一年，又开始使用React Native了，有些东西有些忘记了，写点东西记录一下吧。作为React Native第一次笔记，内容相对较少，会在之后的文章中分享，我在React Native开发中的一些经验和心得。欢迎大家继续关注。
