踩了几天React Native Android的坑。总结为一句话,目前android学习react native还为时过早,坑太多,需要你慢慢去踩。就目前来讲,能踩的坑基本上都踩了一遍,所以还是等它稳定下来再去学吧,否则会浪费掉一大堆时间。

单位

在React Native中,组件的宽度,高度都是不用写单位的,你写个100,在Android中代表的到底是100px还是100dp,就不得而知了,这时候自己实践一下就一目了然了。

var Dimensions = require('Dimensions');var PixelRatio = require('PixelRatio');var AwesomeProject = React.createClass({  render: function() {    return (                    window.width={Dimensions.get('window').width+"\n"}            window.height={Dimensions.get('window').height+"\n"}            pixelRatio={PixelRatio.get()}            );  }});

在我的小米3上,输出的是,而我的小米3的分辨率是1080*1920

window.width=360window.height=640pixelRatio=3

显然输出的是dp的单位,那么如果要转成对应的px的单位怎么转呢,答案就在上面的pixelRatio,将dp单位* pixelRatio就是对应的px的值了,同理px/pixelRatio就是对应的dp的值了。和android中px与dp的转换是一样的。

图片

  • 图片的显示需要指定宽度和高度,否则不会显示
  • 图片资源加载可以从远处加载,也可以从本地加载

远处加载的方式如下

<Image source={{uri:'http://your.host/your.png'}}

这种方式的优势是引入方式简单,更新方便,只需要替换server上的图片即可,不需要修改源代码
缺点也很明显,即初次请求图片时,需要请求server,图片过大的,请求的延时会很大

本地加载需要注意的是图片需要打包,然后据说可以加载手机本地图片,然而我测试了n遍无果,根本加载不进来

   <Image style={{width:100,height:100}} source={{isStatic: true, uri: '/sdcard/icon.png' }}/>

除了加载本地资源,还可以加载静态资源,这个资源需要打包才能使用,也就是不能使用服务器获取js的方式,必须打包后放在assets目录下才能使用,测试后发现也没有什么卵用。

    source={ require('image!icon') } />

系统

如果要判断当前系统是android还是ios,从而进行一些适配工作,可以使用Platform

var Platform = require('Platform');var AwesomeProject = React.createClass({  render: function() {    return (        <View>        <Text>          {Platform.OS}        Text>        View>    );  }});

如果在android中,界面会输出android,如果在ios中会输出ios,当然上面的Platform也可以这么定义

var {  AppRegistry,  StyleSheet,  Text,  View,  Platform} = React;

Toast的使用

有时候为了方便测试,经常会toast,React Native为android也提供了这么一个组件ToastAndroid ,使用方法如下

var ToastAndroid = require('ToastAndroid');ToastAndroid.show('提示的信息', ToastAndroid.SHORT);

或者

var {  AppRegistry,  StyleSheet,  Text,  View,  ToastAndroid} = React;ToastAndroid.show('提示的信息', ToastAndroid.SHORT);

flex布局

  • View默认宽度为100%
  • 当flexDirection的值为column时, justifyContent:’center’为垂直居中, alignItems:’center’为水平居中
  • 当flexDirection的值为row时, justifyContent:’center’为水平居中, alignItems:’center’为垂直居中

定位

  • 和css的标准不同的是, 元素父容器不用设置position:’absolute|relative’ 。默认相对于父容器进行位移。

更多相关文章

  1. Android(安卓)插件化 动态升级
  2. Android使用AsyncTask下载显示图片
  3. 【Rayeager PX2】andoid开机logo分析及PX上的实现
  4. 让Android自带的Gallery实现多点缩放,拖动和边界回弹效果,效果流畅
  5. Android(安卓)APP设计加载使用gif动图需要注意的一般性问题
  6. Android(安卓)插件化 动态升级
  7. [置顶] Android(安卓)插件化 动态升级
  8. Facebook推出强大Android图片库Fresco 自动释放内存 图片缓存 内
  9. android中一些view处理(拖动,定位,显示,图层)

随机推荐

  1. 关于word导出功能的一些技巧步骤提高效率
  2. 完整部署CentOS7.2+OpenStack+kvm 云平台
  3. 厉害了,股票K线图还能这么画!
  4. 【MOS】Index Rebuild Is Hanging Or Tak
  5. Mac上小巧且功能全面的闹钟与睡眠计时软
  6. 日志分析ELK平台部署第一节
  7. 如何打印菱形
  8. funsionchart水印问题
  9. java类的成员初始化顺序和初始化块顺序
  10. 【微信公众号】【深入解析】DRM和read-mo