/react-native-demo

a react native app for tmall 3c home page

Primary LanguageJavaScript

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