前2周,fackbook发布了react-native , 一时间前端界异常兴奋。各种概念飞满天,俺作为前端一份子,也凑凑热闹。

花了2天时间,边看API边写代码,react-native 真是太新了,好多问题都google不到内容,来来去去都是官方文档,这2天下来,也算摸清了react-native的一些用法。

DEMO地址:https://github.com/hugohua/react-native-demo  以后又可以催逼自己会ios开发,哈哈。

过两天再写点经验贴吧。先贴个readme来凑凑字数。

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。

缺少一些常用的css属性,如中划线,两端对齐等。

 

最终效果图

8 thoughts on “react-native demo一例

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required