Android React Native的使用细节问题

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

单位

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

            window.width={Dimensions.get(‘window‘).width+"\n"}
            window.height={Dimensions.get(‘window‘).height+"\n"}
            pixelRatio={PixelRatio.get()}

    );
  }
});" data-snippet-id="ext.7bfb646561fe67a5326cbf4ef608053e" data-snippet-saved="false" data-csrftoken="D0aGxWSM-Z-gCjvyW3XSBeveq1XPkNr28YpU" data-codota-status="done">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遍无果,根本加载不进来

" data-snippet-id="ext.ebaf3fd8c32d616c21e1f0f5d250abfd" data-snippet-saved="false" data-csrftoken="M2nhZ3Aw-4XgyXqgT-4T9siRdYM66LnRzVpE" data-codota-status="done">   <Image style={{width:100,height:100}} source={{isStatic: true, uri: ‘/sdcard/icon.png‘ }}/>

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

    <Image source={ require(‘image!icon‘) } />

系统

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


          {Platform.OS}

    );
  }
});" data-snippet-id="ext.35d6e79f1b2aecd15192d4905cdeb595" data-snippet-saved="false" data-csrftoken="BUmP1AAG-BQrRmb6FnIwiU9dvJUgmcncplRk" data-codota-status="done">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’ 。默认相对于父容器进行位移。
时间: 2024-11-08 00:39:45

Android React Native的使用细节问题的相关文章

Android React Native 开发环境搭建---windows下

环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以看官方的地址,本文只是我个人的实践,并且仅限于window平台. 官方的地址:https://facebook.github.io/react-native/docs/getting-started.html 1.下载Chocolatey 去官网下载,一般没有问题. 2.Node,python2,j

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

Android React Native使用原生UI组件

Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手封装一下,从而能够使用那些React Native没有为我们封装的原生组件,比如WebView,官方并没有提供Android端的实现,那么我们现在就动手封装一下WebView. 之前写过一篇文章Android React Native使用原生模块,而使用原生UI组件的方法和使用原生模块的方法十分类似

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

windows 下android react native详细安装配置过程

写在前面: 在网上搜了很多安装配置文档,感觉没有一个真的跟我安装的过程一模一样的,东拼拼西凑凑,总算是装好了,我不会告诉你,断断续续,我花了两天时间...一到黑屏报错就傻眼,幸好在react群里遇到了热心的同行,还有同事的帮助...废话就到这里了,此处只是记录我自己装载的过程,系统环境各种不一样,可能或多或少有差异. 我的电脑,windows7 64位之前已经装了eclipise,java,jdk,所以,有些安装文档上面的java的jdk和c++,我电脑上并不需要. 这里我还是都粘贴上来. 参考

Android React Native在Android Studio中执行bundleReleaseJsAndAssets 打包失败的解决方法

这个坑在文章记一次在Windows上搭建React Native Android环境踩过的坑中我已经提到过,当时找不到解决方法,只能开一个命令提示符终端独立执行打包.就像这样子 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\

Android React Native使用原生模块

有时候我们的App需要访问平台API,并且React Native可能还没有相应的模块包装:或者你需要复用一些Java代码,而不是用Javascript重新实现一遍:又或者你需要实现某些高性能的.多线程的代码,譬如图片处理.数据库.或者各种高级扩展等等. 而用React Native可以在它的基础上编写真正原生的代码,并且可以访问平台所有的能力.如果React Native还不支持某个你需要的原生特性,你应当可以自己实现该特性的封装. 不过在开始编写代码使用原生模块前,有一个知识点需要掌握,免得

Android React Native自定义组件的流程

假设我们现在有这么一个需求,就是自定义一个组件,该组件由一个小图标和图标的文字说明组成,并且带有背景色,背景色可设置,宽度高度可设置.如下图所示正是两个这样的组件所组成. 首先,在index.android.js目录下新建一个js文件,命名为item.js,在里面输入模板代码 /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('

从零开始的Android新项目10 - React Native &amp; Redux

本篇来讲讲 React Native 和 Redux,和其他一上来就啪啪啪丢上来一堆翻译的东西不同,本文会从简单的例子入手,让大家能快速地明白 React Native 是什么,Redux 和常见的 MVC.MVP 等有什么区别,怎么去组织一个 Redux 架构的 React Native 项目. 为避免大家还没入门就放弃,预计下一篇才会从我们项目中的实践出发,讲讲更复杂的应用场景. 什么是React Native React Native 使你能够基于 JavaScript 和 React 在