Android React Native的使用细节问题

原创 2015年11月20日 13:26:41

踩了几天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 (
        <Text style={styles.test}>
            window.width={Dimensions.get('window').width+"\n"}
            window.height={Dimensions.get('window').height+"\n"}
            pixelRatio={PixelRatio.get()}
        </Text>


    );
  }
});

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

window.width=360
window.height=640
pixelRatio=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目录下才能使用,测试后发现也没有什么卵用。

    <Image 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’ 。默认相对于父容器进行位移。
版权声明:本文为博主原创文章,未经博主允许不得转载。

React Native UI布局总结

1.在React Native(RN)中提供了只有两种布局,分别是:absolute和relative。 如果你之前是搞安卓开发的会觉得RN设计非常怪异,在我们安卓原生开发中,决定用什么布局的是由p...
  • jj120522
  • jj120522
  • 2016年07月10日 02:40
  • 5445

React-native 之 position布局

参考原文:http://www.jianshu.com/p/3699a6e34e50 position布局 position:enum('absolute','relative')。先简单...
  • JLhaoran
  • JLhaoran
  • 2017年04月10日 18:53
  • 2641

ReactNative 定位问题

RN的定位官方提供了API Gecolocation ,通过这个api我们可以拿到当前的经纬度,代码如下: componentDidMount(){ navigator.geolocat...
  • njz582752848
  • njz582752848
  • 2017年04月19日 18:50
  • 1877

如何把React Native嵌入到原生android应用中

原生应用不仅可以跳转到RN页面,也可以吧RN的组件放到原生应用中,作为原生应用的一部分。 首先介绍如何把react native嵌入到android中,然后再介绍如何把RN嵌入到ios中; 第一部分:...
  • liu__520
  • liu__520
  • 2016年10月14日 16:31
  • 4081

React Native嵌入Android原生项目中

开发环境准备首先你要搭建好React Native for Android开发环境, 没有搭建好的可以参考:React Native for Android Windows环境搭建 用Android...
  • u011965040
  • u011965040
  • 2016年11月25日 10:43
  • 5918

React Native Android Cookie Problem

背景 最近使用react native 来写一个公司内部使用的app,使用fetch去登陆,发现在android平台上无法获取cookie,iOS平台上却可以。即使是response.headers....
  • u012422440
  • u012422440
  • 2015年11月04日 13:55
  • 2461

关于React Native项目在android上UI性能调试实践

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年11月10日 21:00
  • 5274

现有Android项目引入ReactNative--九步大法

为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,而且官网的说明不是很详细,不是完全针对安...
  • github_33304260
  • github_33304260
  • 2017年08月02日 10:40
  • 1677

Android React Native的使用细节问题

踩了几天React Native Android的坑。总结为一句话,目前android学习react native还为时过早,坑太多,需要你慢慢去踩。就目前来讲,能踩的坑基本上都踩了一遍,所以还是等它...
  • sbsujjbcy
  • sbsujjbcy
  • 2015年11月20日 13:26
  • 6280

React Native for Android 实战(一):配置和起步

原文地址: http://www.csdn.net/article/2015-09-24/2825787-react-native Facebook开源React Native也势要统...
  • minkowsky
  • minkowsky
  • 2015年11月03日 18:13
  • 7304
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android React Native的使用细节问题
举报原因:
原因补充:

(最多只允许输入30个字)