React Native总结

React-Native总结

1. react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度。

2. 基于flex的布局

   1. view默认宽度为100%

   2. 水平居中用alignItems, 垂直居中用justifyContent

   3. 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug

3. 图片布局

   1. 通过Image.resizeMode来适配图片布局，包括contain, cover, stretch

   2. 默认不设置模式等于cover模式

   3. contain模式自适应宽高，给出高度值即可

   4. cover铺满容器，但是会做截取

   5. stretch铺满容器，拉伸

4. 定位

   1. 定位相对于父元素，父元素不用设置position也行

   2. padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom

5. 文本元素

   1. 文字必须放在Text元素里边

   2. Text元素可以相互嵌套，且存在样式继承关系

   3. numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间

React-Native 打包，分两种，在线打包，离线打包；

在线打包，原声app指向npm服务器端的js文件，可以在线访问，把js文件部署在服务端，这样的有点可以随时改变服务端文件，便于发布；但是依赖网络，没有网络立即报错。 离线打包：离线访问，没有网络的时候程序不会报错；缺点，每次有更新必须从新发布app

下面给大家分享一下离线打包app的方法，ios版本。

react-native bundle --entry-file index.ios.js --platform ios --bundle-output ios/main.bundle  

截图如下：

然后需要在代码中配置一下，将bundle文件拷贝到ios项目目录下，指向生成的main.bundle文件

代码如下：

成功了。