hugohua / react-native-demo

a react native app for tmall 3c home page

Home Page:http://www.ghugo.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Demo

如何运行

  1. 先确保你已安装好了React Native 所需的依赖环境
  2. 在根目录下执行 npm install
  3. 再执行 npm start
  4. 最后在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

最终效果图

image

About

a react native app for tmall 3c home page

http://www.ghugo.com


Languages

Language:Java 95.3%Language:JavaScript 3.8%Language:Objective-C 0.9%