学react-native要学什么

2018-03-21 16:56:41 u013233097 阅读数 7707

前言:顾名思义 React-native-device-info 本第三方就是为了 获取设备信息。

实际上react-native有很多类似第三方,并且使用方式和本例大体相同。作为示例记录下,供有需要的同学学习:

1,初始化项目:

初始化一个 react-Native项目:命令:

win+R // 进入命令行

cd desktop //进入桌面

react-Native  init deviceInfoDemo // 初始化  react-native 项目:

cd deviceInfoDemo //进入项目 根目录

yarn install // 或者 npm install 

项目初始化 完成。

2, 打开模拟器。

使用如下 emulator命令(前提已经配置好 环境变量):


emulator -list-avds // 该命令用于查看  当前计算机下存在的安卓模拟器 

emulator -avd vm_name //修改 vm_name 为你当前计算机 中模拟器名称  打开模拟器。

或者 打开 AndroidStudio 工具 ,打开sdk manager 打开模拟器。

启动模拟器后你可以运行 react-native run-android 命令。模拟器会出现我们初始化的项目界面:

这里写图片描述

3, 安装 和链接 device-Info:

进入项目 根目录 执行命令

安装 react-native-device-info
//Using npm:
npm install --save react-native-device-info

//or using yarn:
yarn add react-native-device-info

别忘了检查是否安装成功。

自动链接:

执行命令:

//shell
react-native link react-native-device-info


//(or using [`rnpm`](https://github.com/rnpm/rnpm) for versions of React Native < 0.27) 
rnpm link react-native-device-info
手动链接:


Android 手动链接

  • 打开 android/build.gradle:
...
  ext {
    // dependency versions
    googlePlayServicesVersion = "<Your Services Version>"
  }
...
  • 进入 android/app/build.gradle: 添加 device-info 依赖
dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
+   compile project(':react-native-device-info')
}
  • 进入 android/settings.gradle: 指定 device-info 目录
...
include ':app'
+ include ':react-native-device-info'
+ project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')

对于 React Native 0.29+ 还需:

  • 进入 MainApplication.java:
+ import com.learnium.RNDeviceInfo.RNDeviceInfo;

  public class MainApplication extends Application implements ReactApplication {
    //......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+         new RNDeviceInfo(),  //添加 此行
          new MainReactPackage()
      );
    }

    ......
  }

对于低版本 React Native:

  • 进入 MainActivity.java: 主界面
+ import com.learnium.RNDeviceInfo.RNDeviceInfo;

  public class MainActivity extends ReactActivity {
    ......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+       new RNDeviceInfo(),  //添加  moudle
        new MainReactPackage()
      );
    }
  }

其他 平台不在赘述。 读者可参考 文末官方地址链接。

贴上 device-info的 部分API方法:

API

方法 返回值类型 iOS Android Windows Since
getAPILevel() //获取应用程序api版本 number 0.12.0
getApplicationName() //获取 应用名称 string 0.14.0
getBrand() // 获取厂家 string 0.9.3
getBuildNumber() // 获取 应用编译版本号 string ?
getBundleId() //获取应用程序包标识符 string ?
getCarrier() // 获取运行商名称 string 0.13.0
getDeviceCountry() // 根据区域设置信息获取设备国家。 string 0.9.0
getDeviceId() // 获取设备 id string 0.5.0
getDeviceLocale() //获取设备的地区 string 0.7.0
getDeviceName() //获取设备名称 string ?
getFirstInstallTime() //获取应用程序第一次安装的时间,以毫秒为单位。 number 0.12.0
getFontScale() //获取设备字体大小。 number 0.15.0
getFreeDiskStorage()//获取可用存储大小,以字节为单位。 number 0.15.0
getIPAddress() //获取设备 当前网络地址 Promise<string> 0.12.0
getInstanceID() //获取应用程序实例ID。 string ?
getLastUpdateTime() //获取应用程序上次更新的时间,以毫秒为单位。 number 0.12.0
getMACAddress() //获取网络适配器MAC地址。 Promise<string> 0.12.0
getManufacturer() //获取设备制造商。 string ?
getMaxMemory() //返回JVM试图使用的最大内存量,以字节为单位。 number 0.14.0
getModel() // 获取设备模式 string ?
getPhoneNumber() //获取电话号码 string 0.12.0
getReadableVersion()//取应用程序可读的版本。 string ?
getSerialNumber() //获取序列号 string 0.12.0
getSystemName() //获取系统名称 string ?
getSystemVersion() //获取系统版本 string ?
getTimezone() // 获取时区 string ?
getTotalDiskCapacity()//获取完整磁盘存储大小,以字节为单位。 number 0.15.0
getTotalMemory() //获取设备总内存,以字节为单位。 number 0.14.0
getUniqueID() //获取设备唯一的ID string ?
getUserAgent() //获取设备用户代理 string 0.7.0
getVersion() // 获取 版本 string ?
is24Hour() //告诉用户偏好是否设置为24小时格式 boolean 0.13.0
isEmulator() //告诉应用程序是否运行在模拟器中 boolean ?
isPinOrFingerprintSet()//告知设备是否设置了PIN号码或指纹 (callback)boolean 0.10.1
isTablet() //告知设备是否是平板电脑 boolean ?

以下 为博主虚拟机 获取到的信息 硬件信息:

这里写图片描述

代码地址:GitHub:https://github.com/zqHero/deviceInfoDemo

官方地址请看:
https://www.npmjs.com/package/react-native-device-info

2017-05-23 23:02:31 u011272795 阅读数 28803

今天学习了轮播图的使用,上网查阅了一下,发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件,对比了下文档,觉得react-native-swiper功能更加完善,而且文档说明比较全面,所以只用了react-native-swiper,下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。


react-native-swiper的github地址

使用说明:

1. 先安装React-native-swiper

使用说明: 
1. 先安装React-native-swiper 
npm i react-native-swiper –save 
2. 导入Swiper 
import Swiper from ‘react-native-swiper’;

  1. 使用 Swiper
<Swiper
    style={styles.swiper}
    height={200}
    horizontal={true}
    paginationStyle={{bottom: 10}}
    showsButtons={false}>
    <Image source={require('./js/img/a.jpg')} style={styles.img}/>
    <Image source={require('./js/img/b.jpg')} style={styles.img}/>
    <Image source={require('./js/img/c.jpg')} style={styles.img}/>
</Swiper>



const styles = StyleSheet.create({

    swiper: {},
    img: {
        width: dimensions.width,
        height: 200,
    }
});

4.相关属性和方法介绍 
先看个事例:

<Swiper
    style={styles.swiper}          //样式
    height={200}                   //组件高度
    loop={true}                    //如果设置为false,那么滑动到最后一张时,再次滑动将不会滑到第一张图片。
    autoplay={true}                //自动轮播autoplayTimeout={4}                //每隔4秒切换
    horizontal={true}              //水平方向,为false可设置为竖直方向
    paginationStyle={{bottom: 10}} //小圆点的位置:距离底部10px
    showsButtons={false}           //为false时不显示控制按钮
    showsPagination={false}       //为false不显示下方圆点
    dot={<View style={{           //未选中的圆点样式
    backgroundColor: 'rgba(0,0,0,.2)',
    width: 18,
    height: 18,
    borderRadius: 4,
    marginLeft: 10,
    marginRight: 9,
    marginTop: 9,
    marginBottom: 9,
}}/>}
    activeDot={<View style={{    //选中的圆点样式
    backgroundColor: '#007aff',
    width: 18,
    height: 18,
    borderRadius: 4,
    marginLeft: 10,
    marginRight: 9,
    marginTop: 9,
    marginBottom: 9,
}}/>}

>
    <Image source={require('./js/img/a.jpg')} style={styles.img}/>
    <Image source={require('./js/img/b.jpg')} style={styles.img}/>
    <Image source={require('./js/img/c.jpg')} style={styles.img}/>
</Swiper>


showsButtons TRUE bool 为true时显示控制按钮
buttonWrapperStyle {backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'} style 自定义样式
nextButton <Text style={styles.buttonText}>›</Text> element 允许自定义下一个按钮
prevButton <Text style={styles.buttonText}>‹</Text> element 允许自定义上一个按钮





属性 默认值 类型 描述
showsPagination TRUE bool 为true时显示小圆点
paginationStyle {...} style 允许自定义小圆点的样式
renderPagination - function Complete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots.
dot <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 自定义没有选中时的组件
activeDot <View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 自定义选中时的组件
dotStyle - object 自定义选中的元素
dotColor - string 自定义选中的元素
activeDotColor - string 自定义选中的元素
activeDotStyle - object 自定义选中的元素





                                    
2017-02-21 14:48:24 sisierda 阅读数 4966

如有疏漏错误,还望指正。转载不忘加上>>原链接<<哦~

react-native是什么? react-native原理
这里写图片描述
从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。

我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。

那么react又是什么呢?他们之间的连字符又有什么特殊的意义呢?下面我们来一一解答。

首先我们来说说react。react是什么?

官网上定义React是一个用于构建用户界面的js库。 React是声明式的,高效率的,并兼具灵活性(React is a declarative, efficient, and flexible JavaScript library for building user interfaces.)。

我们来理解一下,用于构建用户界面的js库有很多啊,比如说angular,vue,jquery,ext等等,都可以被称为用户构建用户界面的js库。

那么react和它们比又有什么不同呢?定义里说react是声明式的,高效率的,并兼具灵活性,这就是react的不同之处了,也可以称为react的几个特性吧。

接下来我们就来分别介绍一下react的这几个特性。

1.声明式声明式是由JSX语法来表现的。那么jsx语法又是啥?JSX是使XML可以嵌入JavaScript的语法。用以更加直观的描述UI。 JSX是JavaScript对象,可理解为createElement的语法糖。

我们来对比一下,首先是原生的js语法:

React.createElement(MyButton,{
    color:'blue',
    shadowSize:2
},'Click Me');

再来看一下jsx语法:

<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

大家一看,这不就是一个语义化的标签么,这样写的确比上面写起来简单,看起来也更清晰,但这就是JSX了么?当然不是,JSX语法的重点在于它是与js代码混写的,配合es6就像下面这样:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

现在是不是感觉有点cool了?JSX语法使用语义化的标签来简化代码的编写,提升了代码可维护性的同时也降低了学习成本

现在主流的IDE和文本编辑器都可以通过安装插件来支持JSX语法。

所以这个声明式指的是什么呢?指的就是上面代码中用大括号括起来的部分{this.props.name}这里类似于angular中的数据绑定。声明了UI中的表现与js中数据的关系。

2.高效率高效率是由虚拟DOM来实现的

虚拟DOM技术指的是使用javascript Object模拟DOM树,计算变更,减少重绘,提升效率的一种技术实现。

这里有一篇文章,写的非常不错,我就直接给大家引用过来,大家自己看吧。
>>虚拟DOM技术分析<<

3.灵活性:这个灵活性范围就广了,有安装的灵活性,编写代码的灵活性等。我侧重来说一个,就是components,组件化。

react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。组件化这个概念大家也都不是第一次听说了吧,如果比较陌生的同学,可以自己搜搜哈。

react有它自己的组件化方式,就是所有模块都继承自React.Components,这比angular的modules更轻量级,结构也更简单,条条框框也减少了很多,是所谓真正的感受到了灵活性呢。

代码示例就像上面讲JSX语法的时候引用的那段,大家体会一下。

好的,我们了解完了react的三个特性,也对react有了初步的理解。那么回到我们最开始的问题:react-native是什么啊?

字面上来说,我们已经了解了react,了解了native的含义,那么react和native又是如何联系起来的呢

首先,React通过虚拟DOM实现了对UI层的解耦(无论是android还是ios)。

然后,将浏览器的DOM树替换为Native的UI模块,使React在移动端进行渲染。

最后,采用Native的核心API完成react与native的通信。
这里写图片描述

由于采用native原生UI作为展现层,所以react-native具有可以媲美原生应用的优秀用户体验与性能优势。

我们对react-native的一些字面上的概念都有了一定的了解。我把以上内容简单的概括为:react-native是基于react技术编写native应用的一门技术,它继承了react简明、高效、灵活的特点,又兼具native优秀的用户体验。

react-native技术采用js编码,编写的应用具有跨平台、可热更新的优势。这就是我眼中的react-native。

2016-09-21 17:23:23 u014168594 阅读数 12398

本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。


首先当然还是介绍一下react-native这个框架:

他是我们大FaceBook公司推出的一款专门用于App的JS框架,号称“Learn once, write anywhere”。本意是想兼容ios和android系统,写一次代码即可在多个平台运行。这个想法可不可行我就先不讨论(其实根本轮不到我这种菜鸟评价啊,光学习已经很吃力了,我可不是变相说明学习曲线陡峭)


现在讲一讲学习历程,经过我的无数弯路,想学习react-native,还是要有一些前置条件。你要先看ecmascript 6,知道JS新语法,不然看到=>()和.then以及...props你会一脸懵逼,这是什么鬼啊,然后再看看react.js这个框架,知道了组件生存周期,有助于你加深理解,最后看react-native你会有骑单车俯冲下山的美妙。

下面是一些网站推荐:

ecmascript 6 :

http://es6.ruanyifeng.com/ 讲得挺仔细的


react.js的话先看中文:

http://www.ruanyifeng.com/blog/2015/03/react.html阮老师的入门到精通

http://wiki.jikexueyuan.com/project/react/极客学院的翻译

http://www.ruanyifeng.com/blog/2016/01/flux.html教你理解Flux

理解的差不多了,还是看看英文文档养成习惯吧

官方英文:https://facebook.github.io/react/


react-native中文:

http://www.lcode.org/react-native/ 这个很好,对着例子敲一遍差不多就入门了

http://reactnative.cn/docs/0.31/getting-started.html#content中文官网

官方英文:https://facebook.github.io/react-native/docs/getting-started.html

另:http://blog.csdn.net/quanqinyang/article/details/52215641

3分钟让你理解RN的布局方式,短小精悍

https://js.coach/ RN的插件库


先这样吧,下次我再来梳理梳理我的知识,希望这有帮助到你们。


2016-09-29 15:32:16 jing85432373 阅读数 16717

一.通过npm安装react-native-swiper

$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save


二.在项目中导入

import Swiper from 'react-native-swiper';


三.使用

  render(){
    return(
        <View>
          <Swiper height={200}
                  loop={true}
                  // showsButtons={true}
                  index={0}
                  autoplay={true}
                  horizontal={false}
                  >
               {this.renderImg()}
//轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre">	</span>
           </Swiper>
        </View>

    );
  }


  renderImg(){
          var imageViews=[];
          for(var i=0;i<images.length;i++){
              imageViews.push(
                  <Image
                      key={i}
                      style={{flex:1}}
                      source={{uri:images[i]}}
                      />
              );
          }
          imageViews.push(<Text>lalala</Text>);
          return imageViews;
      }



四.相关属性说明

1.Basic

Prop Default Type Description
horizontal true bool 如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。
loop true bool 如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。
index 0 number 初始进入的页面标识为0的页面。
showsButtons false bool 如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。
autoplay false bool 设置为true,则页面可以自动跳转。

2.Custom basic style & content

Prop Default Type Description
width - number 如果你没有特殊的设置,就通过flex:1默认为全屏。
height - number 如果你没有特殊的设置,就通过flex:1默认为全屏
style {...} style 设置页面的样式。

3.Pagination

Prop Default Type Description
showsPagination true bool 默认值为true,在页面下边显示圆点,以标明当前页面位于第几个。
paginationStyle {...} style 设置页面原点的样式,自定义的样式会和默认样式进行合并。
renderPagination      
dot <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 可以自定义不是当前圆点的样式
activeDot <View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 可以自定义当前页面圆点的样式

4.Autoplay

Prop Default Type Description
autoplay true bool 设置为true可以使页面自动滑动。
autoplayTimeout 2.5 number 设置每个页面自动滑动停留的时间
autoplayDirection true bool 圆点的方向允许默认自己控制

5.Control buttons

Prop Default Type Description
showsButtons true bool 是否显示控制箭头按钮
buttonWrapperStyle
{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30,  top: 70, left: 0, alignItems:'flex-start'}
style 定义默认箭头按钮的样式
nextButton
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text>
element 自定义右箭头按钮样式
prevButton
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text>
element 自定义左箭头按钮样式