Awesome

React Native Demo

如何运行

先确保你已安装好了React Native 所需的依赖环境
在根目录下执行 npm install
再执行 npm start
最后在Xcode中点击run 运行或者按 command + R

可能遇到的问题

error 1003 错误

在家开着VPN写代码，一般会遇到该问题，解决方法：

打开项目中的AppDelegate.m，找到这行代码：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]，将localhost换成自己的ip

一点经验

图片自适应

react native 中，图片必须明确写明大小值，不然无法显示，同时width : '100%'',这种写法不支持。

如果需要自适应，有几种做法：

只写高度值，不写宽度值，外层容器使用flex来做好布局，再配合resizeMode实现图片自适应即可。

例子1 :

<View style={{flex : 1,borderRightWidth : 1,borderRightColor: '#eeeeee'}}>
                <Image style={{height: 110,resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} />
            </View>

例子2 :

<View style={{
  flex: 1,
  alignItems: 'stretch',
}}>
  <Image ssource={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} style={{ flex: 1 }} />
</View>

使用Dimensions来获取设备viewport的宽高

var Dimensions = require('Dimensions');
var { width, height } = Dimensions.get('window');
var image = (
  <Image style={{width: width, height: 100 }} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} />
);

关于layout-css

react-native(rn)中使用flex来布局，目前使用来看，配合positon : 'absolute'是能够满足基本页面布局需求的。

但是rn中没有zIndex，也没有position : 'fixed'，在复杂的页面布局中，会稍微有点麻烦，但还是能实现类似的效果。

rg中只实现了css中很小的一个子集，还有很多属性值无法使用，并且属性写法繁琐，如在web中的css 如果要写padding : 10px 5px 15px 20px,在ng中则全部要分开属性写:paddingTop : 10,paddingRight : 5 ... 感觉一夜回到解放前。。

positon : 'absolute'定位方式是相对于父级元素，不管父级是否具有relative。