native开发总计,学习难点

By admin in 4858美高梅 on 2019年4月13日

项目地址:
说明
• 项目总括代码地址
• 从类别上马起步(201八-07-0贰)到项目进入测试(201捌-0八-20)
• 从本人宗旨没用过react,到平昔上手react-native

其实从内心自笔者是又爱又怕,爱是本人实在很已经像入手除Vue以外的框架,多接触和上学有个别不平等的思维;怕是前者就作者二个,1切坑都由友好来抗;综上说述,内外压力必然会相当大

进度正是日复30日的商讨在研商,不停地问难题,然后在研究;开发rn很想付出小程序,越来越多时候依旧采纳rn提供的零部件,再增进一些js技巧

结果:自个儿对社区的使用特别的随手,面对难点不在过分畏惧而是不断深刻思虑,直至化解

心境:其实直面难题并不难,难的是祥和阅览了难题背后还有为数不少个难点,那时候本身就不想面对了;后来知道与其逃避,不及蒙受多少个干掉二个,不然攻城狮不是白叫了
• 上面是温馨在实际中从初叶到告竣总计的有的事物,后续随着进展还会更新
简介
• 记录开发react-native中各样逸事体
• 最新探索,用来进展种种尝试的上空
• 达成的切磋,记录全部曾经到位的模块、功效和遵从
• 中间转播站,一时半刻失效
安装
大局脚手架
npm i -g react-native-cli
安装基础项目
react-native init <项目名称>
运行
优化后的运作
• ios:npm run ios
• android:npm run android
• ios and android:npm run s
固有运转
• ios:react-native run-ios
• android:react-native run-android
资源
• navigation集成
• 集成icons
• react-native-easy-toast
• rn能源列表
• 横向滑动展现按钮效果
• 自定义行动列表
• 密码输入效果
native开发总计,学习难点。• 选项卡导航之间滑动
• 2维码生成
未深究的能源
3陆三个库中查找7九个

1.E兰德酷路泽RO索罗德  Packager can’t listen on port
808一:那么些难点是因为您曾经有3个命令行程序正在运作!

@(编制程序星球)

易快递,1款物流查询跨平台app,功效虽简单,但“麻雀虽小,5脏俱全”,是本身基于Facebook出品的ReactNative开发的第7个跨平台app,Learn
once, write anywhere。

  1. select选择控件
  2. 开关式接纳列表
  3. 表情选拔器
  4. 左右滑动层
  5. 手提式有线电话机号选拔控件
  6. 报到动画
  7. 图表查看器
  8. 菜单操作动画
  9. 滑动操作图片体现样式
  10. 操作打字效果
  11. 声音可视化
  12. 占位符
  13. 图表查看器
  14. 混淆背景效果
  15. 地点图片一级操作
  16. 四方拖动作效果果
  17. 信用卡输入效果
  18. 拓展动画效果
  19. chart
  20. 开首化运转页
  21. 日期
  22. 反正滑动操作卡片效果
  23. 列表拖拽
  24. chart
  25. 密码锁效果
  26. 星级评价
  27. 手动签字
  28. 滑动时间轴效果
  29. 江山2陆字母选拔
  30. PDF查看
  31. 26字母采纳
  32. 分享
  33. 对话框
  34. 对讲机、地址等操作
  35. 后台新闻有限协助
  36. 图形查看器
  37. 反正滑行动画
  38. 无互联网操作
  39. 颜色选用器
  40. 左右滑动tab动作效果
  41. 加载中功能
  42. 左右滑行效果,类似酷划锁屏
  43. 2维码生成器
  44. 图表查看器
  45. 视差效果
  46. 日期
  47. 点击效果、
  48. 扇形菜单
  49. 手势识别
    增加产量页面须求在四个地点进行操作
  50. data里面包车型客车complete.js中添加多少,方便在成就的切磋中出现
    2.
    navigators中的AppStackNavigators.js里面进行引入=>注册,使得路由平常
  51. pages里面添加页面
    优化package.json使支付尤其方便人民群众
    • 在scripts中加上,如下内容:
    “ios”:”react-native run-ios”,
    “android”:”react-native run-android”,
    “s”:”npm run ios && npm run android”,
    flex布局常用属性
    • 幸免在flex中冒出,固定成分被挤压的标题,使用flex:一举行优化
    display: ‘flex’;
    flexDirection: row | row-reverse | column | column-reverse;
    flexWrap: nowrap | wrap | wrap-reverse;
    flexFlow:

二.Could not connect to development server : 打开新的通令行窗口 运营react-native start

看得懂的React Native 0.3伍版本文书档案翻译(The basic)

[toc]

正文已授权微信公众号:Android经验分享,在微信公众号平台原创头阵。

order:

3.* What went wrong:

前言

  1. 正文是对React
    Native官方文书档案中The Basic局地的”意译”.并不是一字一板对应文书档案翻译的.英文和普通话在表述上有很多见仁见智的地点,假诺一字一板翻译,最终反倒令人摸不着头绪.本文基本遵从法定文书档案翻译,有局地删去,重集团,个人体会,不多.

  2. 对于文书档案的目录,本文未有翻译.小编认为文书档案目录是对一小节最精华的总计,往往还推搡到一些故意的名词,看原来的更带动树立起全部印象.

  3. 有些有意的概念名词,小编也没翻译为粤语.一来由于个人水平,二来小编以为概念名词是相当首要的,用中文很难完全部现其内涵,不比直接用英文品味.

  4. 水平有限,欢迎指正.

APK安装地方

  • Run Proguard to shrink the Java bytecode in release builds.
    /
    def enableProguardInReleaseBuilds = true
    错误处理
    fetch(apiLogin, {
    method: ‘POST’,
    headers: {
    ‘Accept’: ‘application/json’,//通过头钦赐,获取的数据类型是JSON
    ‘Content-Type’: ‘application/json’,
    ‘Authorization’:global.data.token,
    },
    body: JSON.stringify({
    // 请求参数
    })
    })
    .then(result => {
    const {status,statusText} = result;
    if(status>=200&&status<300||status==304){
    // 成功
    const promise = result.json()
    promise.then(rtn=>{
    // 成功
    })
    }else if(status==403){
    // 跳转登录
    this.props.navigation.replace(‘login’);
    }else{
    // 提醒 statusText
    this.refs.toast.show(statusText);
    }
    })
    .catch(error => {
    if(Object.prototype.toString.call(error) === ‘[object Object]’){
    this.refs.toast.show(JSON.stringify(error))
    }else{
    this.refs.toast.show(error)
    }
    })
    app的logo and name
    android
    LOGO

    将logo分别放置android/app/src/main/res下的多少个公文夹中,命名称为ic_launcher.png
    • 未有对应上的文本夹放一张十二四
    1024或者512*512的即可
    app名称
    • 在android/app/src/main/res/values/strings.xml中更改
    IOS
    LOGO
    • xcode> 根目录 >Images.xcassets 将转变的图标拖入对应的岗位
    app名称
    • xcode> 根目录 >Info.plist 中修改 Bundlename 和 General>
    DIsplay Name

Execution failedfortask’:app:installDebug’.>
com.android.builder.testing.api.DeviceException: No connected devices!

The Basics

国际案例,有图有实质:

首页效果图

查快递和物流详情

寄特快专递和扫描

有关和自定义主旨

*Try:

Getting Started

这一小节是教您怎么在您的类别上设置好开发中华VN必要的事物,借使您曾经懂了,跳想下一节.

今非昔比的操作系统(windows,mac,linux),分化的阳台(IOS,Android)对怎么设置RN都有影响.

付出IOS只辛亏Mac上,开发Android在Windows,Mac,Linux上都能够.

当下模块包含:

  • 首页:首页顶部首要不外乎了“查快递”、”寄快递“、“扫码”三大功效模块,中间有公共利益爱心捐款的轮播广告,下部首借使新近查询快递的实时物流信息
  • 查快递:数据用了快递鸟的运单识别、实时查询api,帮助扫码识别,匡助运单号识别,选取快递集团查询
  • 寄特快专递:近期关键是一个列表展示了各大主流快递公司的客服电话,假如要调用api下单,音信界面太沉闷,有待后边功用完善
  • 扫码:首借使调用摄像头急忙识别运单号查询快递
  • 自定义颜色宗旨

Runwith–stacktraceoptiontogetthe stack trace.
Runwith–infoor–debugoptiontogetmore log output.

IOS+Mac

内需的事物有Node.js,Watchman,the React command line interface,Xcode.

技术框架:

  • “buffer”: “^5.0.6”,(base64编码)
  • “react”: “16.0.0-alpha.6”,
  • “react-native”: “0.44.2”,
  • “react-native-camera”: “^0.6.0”,(扫码)
  • “react-native-deprecated-custom-components”: “^0.1.0”,
  • “react-native-easy-toast”: “^1.0.6”,
  • “react-native-parallax-scroll-view”: “^0.19.0”,
  • “react-native-storage”: “^0.2.2”,
  • “react-native-swipeout”: “^二.1.壹”(滑动删除)

花色周转步骤如下:

  • 第一步:npm install
  • 第二步:react-native link
  • 第三步:react-native start
  • 第四步:react-native run-android(或 run-ios)
    反驳包容Android/ios,但没在ios真机上试过。

BUILD FAILED 那是装备没运转起来 推荐应用genymotion模拟器

Node,Watchman

在mac上引入应用Homebrew安装NodeWatchman.(这一个不要多说,用Mac开发的应该都懂Homebrew安装软件,网上资料很多)

安装好后运营下边包车型地铁通令:

brew install node
brew install watchman

watchman是二个由facebook开发的查阅文件系统变化的工具.能够升高品质(It
is highly recommended you install it for better performance.).

小结心得:

本条是自身开源的率先个用 CRUISERN从零到一写的项目了,后边也有仿写过美团app,但只是讲究UI,没提到的事情的代码编写,而那二个”易查询”app,无论是ui、业务和流行的控件都有涉及。

一、项目布局首要沿用了接近android项指标布局,如下图,
根本特色:

  • 包首要分为common(通用控件)、dao(数据层)、model(实体类)、res(图片和样式和常量)、ui(js页面)、util(通用工具)
  • 存放页面包车型地铁js文件夹命名以page结尾
    -须要复用的零件抽取成独立2个类,存放到 common包中。
  • 图片、常量、颜色、公共样式等财富,分别用一个入口类管理,就和 Android
    中管理财富的做法类似,那样更易维护。

项目结构

贰、遭受的坑

  • react-native版本升级相比较快,有局地控件大概在低版本存在,高版本已经独自出来了,比如,从0.4四本子起首,Navigator被从react
    native的大旨器件库中退出到了八个名称为react-native-deprecated-custom-components的独自模块中
  • listview的数据源更新了,但界面没跟着调整,这要提到到数量深浅拷贝的标题,用JSON.parse(JSON.stringify(this.state.traceDatas))深拷贝能消除那些题材,具体育赛事例可参照本项指标首页去除列表功效
  • 打包android apk时不能够一向用android studio的可视化generate signed
    APK打包格局,那样打包的apk会因为缺乏index.android.bundle文件打开时一贯奔溃,尽量用EscortN官方推荐的形式打包
  • 还有众多细节的事物,近日半会也说不清楚,唯有真正入手做了才能心领神会

谈到底附上下载地址和源码
Github源码
安装地方

越多精粹小说请关心微信公众号”Android经验分享“:那里将长久为你分享Android高手经验、中外开源项目、源码解析、框架设计和Android好文推荐!

扫1扫加我啊

肆.导入的类必须是大写的   import App from ‘./src/app’;正确    import app
from ‘./src/app’;错误.

The React Native CLI

The React Native CLINode.js的二个包,所以用Node.jsnpm来设置,今后设置Node.js的时候npm就自动ok了.运维上面包车型地铁通令:

npm install -g react-native-cli

1经发生权限错误,运转:ssudo npm install -g react-native-cli
只要发生错误Cannot find module 'npmlog,尝试直接设置npm:curl -0 -L http://npmjs.org/install.sh | sudo sh.

5.当从github新download下来3个档次,并运维react-native
run-ios命令时,报React Native: Command run-ios unrecognized

Xcode

安装Xcode.进入App Store,然后安装.

    1.第一步:npm install –save react-native@latest

Testing your React Native Installation

测试你的React Native是还是不是安装成功.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

地点代码正是成立了二个叫AwesomeProject的花色,然后运维.
打响的化就能在模拟器上看见了.

你也得以在Xcode也许Nuclide直接运营.

     2.第二步:npm install

Modifying your app

打响运维后,大家来对那么些app做一点小改变.

  • 打开index.ios.js,然后做些修改.(比如修改下要出示的文字)
  • Command⌘ + R重复加载那些app,看看文字有未有变.

6.  .invariant violation:expected a component class,got[object
object]           创立自定义组件首字母要大写,不然会报错.

That’s it!

嗯,第一个RN app,That’ it!.

七.  .Module 0 is not a registered callable
module.将gradle升级成最新版本(cdAndroid
进入android目录执行:sudo./gradlew clean) 可能通android       
studio工具升级.

Android+Mac

内需的东西有Node.js,Watchman,the React command line interface,Android Studio.

8..android.view.WindowManager$BadTokenException: Unable to add window –
token null is not valid; is your activity running?

Node,Watchman

在mac上引入使用Homebrew安装NodeWatchman.(这一个不用多说,用Mac开发的应有都懂Homebrew安装软件,网上资料很多)

安装好后运营下边包车型大巴一声令下:

brew install node
brew install watchman

watchman是一个由facebook开发的查阅文件系统变化的工具.能够增加性能(It
is highly recommended you install it for better performance.).

该错误属于安卓Native的失实,假使引用的Activity不存在或然曾经销毁,再一次引述就会报该错误,借使是React
Native 调用原生控件的话,创制控件须求引用:getCurrentActivity()

The React Native CLI

The React Native CLINode.js的3个包,所以用Node.jsnpm来设置,今后设置Node.js的时候npm就自动ok了.运行下边包车型大巴授命:

npm install -g react-native-cli

假诺产生权限错误,运行:ssudo npm install -g react-native-cli
假诺发生错误Cannot find module 'npmlog,尝试直接设置npm:curl -0 -L http://npmjs.org/install.sh | sudo sh.

9.  .react native undefined is not an object (evaluating this….

Android Development Environment

一经你是个android菜鸟配置好开发条件或然很难.即使您是个行家了,那儿也有个别你要配置.不管哪一种景况都好雅观下下边包车型地铁步骤.

设若真的是android零基础提出先看下android相关书籍.

产生该错误的貌似是忘记bind(this),只要回调函数中须要用到this的,1般都须要bind.

1.安装Android Studio

没什么好说的.

10.react native 错误unable to load script form assets解决

贰.担保Android SDK成功安装

在android中开拓SDK Manager,不言自明.(google或百度相关文化吧.)

      壹.先是手动在main下建立二个assets文件夹

3.设置path路径

The React Native command line Interface要求有ANDROID_HOME环境变量.创造或编辑~/.bashrc丰富一下两行(具体路线看本身的设置路径!!!):

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools

     二.然后cmd 进入项目标根目录下实行react-native bundle –platform
android –dev false –entry-file index.js –bundle-output
android/app/src/main/assets/index.android.bundle –assets-dest
android/app/src/main/res

四.成立三个android虚拟设备

4858美高梅 1

1476925768956.png

如图点第三个图标

在终点中输入一下发令看有着创设了的android设备:

android avd

android
studio使用指南

     3.在履行react-native run-android 跑起来了

Testing your React Native Installation

测试你的React Native是不是安装成功.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

地点代码便是创制了3个叫AwesomeProject的档次,然后运营.
中标的化就能在模拟器上看见了.

您也足以在Xcode或然Nuclide直接运转.

Modifying your app

中标运营后,大家来对那么些app做1些小改变.

  • 打开index.ios.js,然后做些修改.(比如修改下要显得的文字)
  • 点两次R件选择Reload再也加载那些app,看看文字有未有变.
That’s it!

嗯,第一个RN app,That’ it!.

Android+Linux

亟需的有Node.js,the React Native command line interface,Android Studio.

Node

设置Nodejs.js
四或以上版本

The React Native CLI

运维一下命令,安装(前提是node.js和npm都设置好了):

npm install -g react-native-cli

Android Development Environment

假若您是个android菜鸟配置好开发环境大概很难.假设你是个熟手了,那儿也有个别你要配置.不管哪一类景况都好美观下上面的步骤.

万一真的是android零基础建议先看下android相关书籍.

1.安装Android Studio

没什么好说的.

二.担保Android SDK成功安装

在android中开拓SDK Manager,不言自明.(google或百度有关文化吧.)

3.设置paths路径

The React Native command line Interface要求有ANDROID_HOME条件变量.

创造或编辑你的~/.bashrc文本,添加以下两行(具体路线看本人的安装路径!!!):

export ANDROID_HOME=~/Android/Sdk
export PATH=${PATH}:${ANDROID_HOME}/tools

四.开立1个android虚拟设备

![1476925768956.png](http://upload-images.jianshu.io/upload\_images/1904571-7ecb4f53f3d54100.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
![Uploading 1476927262553_080150.png . . .]

如图点第三个图标

在极限中输入一下限令看有着创制了的android设备:

android avd

android
studio使用指南

Watchman(options)

本条是可选项.查看沃特chman安装guide,源文件编写翻译安装.(有ppa)

Testing your React Native Installation

测试你的React Native是否安装成功.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

地方代码正是创制了3个叫AwesomeProject的门类,然后运营.
成功的化就能在模拟器上看见了.

贰个宽广的标题是大概在运转react-nativ run-android时packager没有自动运行.运行react-native start

Modifying your app

成功运维后,大家来对这么些app做壹些小改变.

  • 打开index.android.js,然后做些修改.(比如修改下要出示的文字)
  • 点两次R件选择Reload再一次加载那个app,看看文字有未有变.
That’s it!

嗯,第一个RN app,That’ it!.

Android+Windows

亟待的有Node.js,the React Native command line interface,Android Studio.

Node

文档提议通过Chocolatey(1个windows平台的包管理工科具)安装Node.js和Python二.设置好chocolatey后以管理身份打开命令行运营上边包车型地铁命令.

choco install nodejs.install

choco install python2

The React Native CLI

安装好npm后(node.js的包管理工科具,安装node.js会1起安装npm),运营上面包车型客车一声令下:

npm install -g react-native-cli

Android Development Environment

假若您是个android菜鸟配置好开发环境恐怕很难.如若您是个熟手了,那儿也有个别你要配置.不管哪一种景况都好美观下上边包车型地铁步骤.

只要实在是android零基础建议先看下android相关书籍.

1.安装Android Studio

没什么好说的.

2.承接保险Android SDK成功安装

在android中开拓SDK Manager,不言自明.(google或百度相关文化吧.)

3.设置path路径

The React Native command line Interface要求有ANDROID_HOME条件变量.

故此添加二个ANDROID_HOME变量(都起先学HighlanderN了应有精通怎么弄了啊,不难放张图)

4858美高梅 2

1476927262553.png

途径是看本人的装置路径!!!别被图骗了

4.创办2个android虚拟设备

![1476925768956.png](http://upload-images.jianshu.io/upload\_images/1904571-7ecb4f53f3d54100.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
如图点第①个图标

在极限中输入一下指令看有着创设了的android设备:

android avd

android
studio使用指南

Testing your React Native Installation

测试你的React Native是还是不是安装成功.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

一个大面积的难题是可能在运营react-nativ run-android时packager没有自动运行.运行react-native start

地点代码正是创办了二个叫AwesomeProject的连串,然后启动.
打响的化就能在模拟器上看见了.

Modifying your app

中标运转后,大家来对这些app做一些小改变.

  • 打开index.android.js,然后做些修改.(比如修改下要彰显的文字)
  • 点两次R件选择Reload再也加载那么些app,看看文字有未有变.
That’s it!

嗯,第一个RN app,That’ it!.

Tutorial

React Native与React类似(都以用component来营造),但是它利用的是native
component而不是web component来创设.
为此要想知道PAJERON你就要精通有个别基本的React概念,比如JSX,components,state,props.

那里大概说下JSX是壹种在javascript中写html成分的语法,component是组件(能够类比于android中的种种view),state表示的是component的”状态属性”,用它来决定component的变迁,props用来控制component不变的”属性”“.
(对于这个基础概念确实须求理解,才能很好的求学汉兰达N.欢迎看react官网或本人的起首翻译)

Hello World

坚守守旧大家来写个Hello World:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

4858美高梅 3

1476600391774.png

自己去try下吧!

What’s going on here?

上边以及上面接纳的东西看起来不太像javascript,别怕.那是大家前面将要学的.

ES陆是对javascript的一体系升级,已经是javascript官方的正统,可是很心痛还并没有被抱有的浏览器扶助.所以在web开发中还尚无周密应用.

React
Native帮衬ES陆,所以放心使用吧.像import,from,class,extends,() =>这么些语法都以ES陆的个性.固然您对那些不熟,那儿有个网页能够帮您.

地点的代码中还有3个看起来尤其的地方<Text>Hello world!</Text>.这是JSX语法–在javascript中放到XML.(那也是奥德赛N中越发的地点之1).在其他的局地web开发中,往往是使用模板语言(templateing
language),让您把代码嵌入模板语言中(比如模板中写个变量,通过变量差异的值能够变动内容稍有两样的页面).

在React中那反了苏醒(正是说在代码中放”模板”).

Component and AppRegistry

下面的代码表示塑造了三个叫HelloWorldApp的新component,并且用AppRegistry注册了.
当您营造二个汉兰达N
app时你会写出累累的component。任何在显示屏上出示的都以某些项指标component。(所以说是凯雷德N是component化开发的).

四个最基本的component–只供给有个render()函数,用来回到一些JSX去render。

AppRegistry告诉奥迪Q5N对于那几个动用哪个component是root component
在1切app的人命中,AppRegistry.registerComponent只会被调用2遍.

This App Doesn’t Do very Much

继续学下去,下个知识点是Props.

Props

创造component的时候可以用分歧的参数(parameters)自定义(customized)。那么些参数被称呼props。

譬如说,一个为主的RubiconN
component–Image。当你创设3个Image时,你能够用1个叫source的prop去决定体现如何图片。

在JSX中央银行使{}括住八个javascript表明式。如下边包车型客车的{pic}

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

你能够经过this.props.xxxrender函数中援引二个您本人定义的prop。

    import React, { Component } from 'react';
    import { AppRegistry, Text, View } from 'react-native';

    class Greeting extends Component {
      render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
      }
    }

    class LotsOfGreetings extends Component {
      render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
      }
    }

    AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

view作为别的component的容器,能够用来支配style和layout。

将props和其它component结合使用,如TextImageView,就足以创立出过多静态的页面。学习State能够使您页面出现。

State

有二种档次的数码用来支配三个component:props和state。
props是因而parent来设置的(props are set by the
parent),并且在component的性命中不会生出变更。
对此那一个变化的多少,大家用state来表示。

一般说来,在构造器中起始化state,然后在急需的时候调用setState方法去改变state。

譬如说,让大家成立五个直接blink(眨眼)的文字的component。文字内容在它被创建时就安装好就不会转移,所以文字内容是这一个component的三个props。文字展现一向在转移,所以应当是贰个state。

    class Blink extends Component {
      constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
      }

      render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
      }
    }

    class BlinkApp extends Component {
      render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
      }
    }

    AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

4858美高梅 4

1476753050882.png

在真的的app中,你可能越来越多的不会通过一个计时器来改变state。大概会从服务器获得新数据照旧新的用户输入后去设置新的state。

你只怕行使二个像Redux这么的state
container去决定你的数据流(data
flow)。那时就采取Redux去改变state而不是平素调用setState。

style可以使component更漂亮,下面讲style.

Style

rn中你不用选用格外的编制程序语言还是语法来定义styles。直接用javascript来style你的app。全部的骨干
component都有八个叫style的prop。style的名字和值与web开发上的CSS相通,例外是用background来代表background-color(还有类似的中等用-连接的属性)。

style的值能够是三个纯javascript对象。那也是大家在example代码中最常用的。还足以是四个关于style的数组—-数组中最终边的style有最大的优先权,所以您能够用那个去继续styles。

对此多个特别复杂的component,平时用StyleSheet.create去整合好多少个styles。以下是个例子:

4858美高梅 5

1476753641855.png

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, Text, View } from 'react-native';

    class LotsOfStyles extends Component {
      render() {
        return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
      }
    }

    const styles = StyleSheet.create({
      bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
      },
      red: {
    color: 'red',
      },
    });

    AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

贰个惯常的做法(pattern)是使您的component接受贰个style
prop,用来风格化subcomponent。You can use this to make styles “cascade”
the way they do in CSS.

有很多措施来自定义text的来得。那有个Text component
reference,你像看看。

上边多少个知识点是控制component的轻重。

Height and Width

2个component的height和width决定了它在显示屏上的大大小小。

Fixed Dimensions(固定尺寸)

最简易的安装二个component的高低的章程是给style加二个恒定的widthheight
rn中的尺寸都以未有单位的,代表density-independent pixel(dip)

4858美高梅 6

1476754423112.png

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';

    class FixedDimensionsBasics extends Component {
      render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
      }
    };

    AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

那种措施设置尺寸,无论在什么尺寸的显示屏上都会有同等的轻重缓急(在大小屏就会有两样的体现效果,不太好)。

Flex Dimensions(软和的尺寸,软软代表着能够依据事态拉伸或裁减)

在component中使用flex使得component依据可用空间expand或shrink。平常,你设置flex: 1,告诉二个组件去占有全部的可用空间,与别的子组件均匀的共享parent的空间。给3个越来越大的数字,意味者那一个组件比起silbing(兄弟)会占据越来越多的长空。

2个组件只可以在它的parent的尺码超越0时扩大占有可用空间。假使1个parent
component未有二个固定的长度宽度也许flex,这一个parent
component的尺寸将会为0,并且children不可知。

4858美高梅 7

1476754579107.png

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';

    class FlexDimensionsBasics extends Component {
      render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
      }
    };

    AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

Layout with Flexbox(Floxbox布局)

component能够动用flexbox算法来为子组件布局.Flexbox被规划用来在区别大小的显示屏上提供相同的布局成效(一句话来说,比如一个组件在小屏宽度占显示屏的5/10,在大屏也是50%,那正是壹样的布局功效。).

结合使用flexDirection,alignItems,justifyContent等来完毕科学的布局吧!

PRADON中的Flexbox和web中css中的Flexbox用法基本相同.只是有些暗中同意值区别.比如flexDirection默认是column,alignItem默认是stretch.flex参数只支持贰个数字.

Flex Direction

在component的style中加入flexDirection来支配布局的方向.也正是子组件应该横着排依旧树着排.暗中认可是column

4858美高梅 8

1476754759453.png

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Justify Content

justifyContent决定子组件在flexDirection的大势上怎么放,比如居中,靠左等.可用选择有:flex-start,center,flex-end,space-around,space-between.

4858美高梅 9

1476754798874.png

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

Align Items

alignItems明确子组件在第一方向轴(secondary
axis)上的排布情况,可选的参数有:flex-start,center,flex-end,stretch.

对于stretch当组件在第三大方向轴上有固定大小时才有效果.

4858美高梅 10

1476754826422.png

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

Handing Text Input

TextInput是贰个允许用户输入文字的底子组件.它有贰个onChangeTextprop关联(take)着一个函数,当文字改变时会被调用.还有3个onSubmitEditing当提交文字时被调用.

比如说,让自身执行下.当输入时把输入的文字翻译成此外一种语言.好吧,任何输入都会被翻译为.(猜度是罗睺语…).所以以下的”hello
there Bob”会被翻译为””:

4858美高梅 11

1476754867299.png

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

本条例子中,text被设置为2个state,因为文字内容是要改变的。

Using a ScrollView

ScrollView是多少个暗含五个零部件和view的,能够滑动的container组件.(和android中的ScrollView地位平等).滑动的item不必然要一致(正是说能够把text,image何以的差异的零件放在2个ScrollView中).代码如下:

4858美高梅 12

1476754988485.png

import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'

class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return(
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe',
  () => IScrolledDownAndWhatHappenedNextShockedMe);

ScrollView在显示数量不多大小有限定的机件时相比合适.全数在ScrollView中的成分都会被render,不管它可不可知.假如你有非常长的列表1样的items那就应有运用ListView

Using a ListView

类比于android中的ListView,正是这样.
ListView展示垂直方向上的可改变的(每行数据不雷同,向下滑动会改变现实在荧屏上的),结构化数据.

ListView用在长列表化的数据展现.ListView不会二遍render全体的element,只render在荧屏可见的.

ListView要多个必须的props,1个是dataSource,顾名思义便是数据.还有二个是renderRow,传一条数据给它,它回到三个一定格式的component去render.(类比于android中的adapter)

下边是一个暗含TextListView:

4858美高梅 13

1476755020069.png

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

Using Navigators

手提式有线电话机app差不离都以多少个页面包车型地铁.只要当你添加第一个页面包车型大巴时候就您就赶上了1个标题,让用户怎么样导航到任何页面.

rn中用navigator来拓展跳转.那个跳转类型能够分为两类,side-to-side
animations down a master/detail stack,也许overtical modal popups.

Navigator

瑞鹰N有有些个内建的navigation components,第一个app就用navigator了.它提供了导航栈(navigation
stack)的javascript实现.所以它在android和iOS上都得以很简单的自定义.

https://facebook.github.io/react-native/img/NavigationStack-Navigator.gif

Working with Scenes

scene能够翻译为二个页面,不过感觉”场景”更好,不太不难理解,所以间接用scene来理解那个定义更加好.

A scene is nothing other than a React component that is typically
rendered full screen. 3个scene便是贰个渲染出来占据全屏的react
component.

那时你对怎么着规则而很好的渲染三个组件应该没难点了,比如二个view在那之中嵌入贰个Text,或许三个全部许多ImageScrollView.现在大家就把那几个零部件合在一起构成贰个scene.

scene和text,image相比较,后者都以三个screen的一片段,scene是fullscreen的.在事先的例证中已经使用了,只是可能未有意识到.

多说无益,让本人来看个例证:创设二个叫”MyScene.js”的公文,内容如下

    import React, { Component } from 'react';
    import { View, Text, Navigator } from 'react-native';

         export default class MyScene extends Component {
         static get defaultProps() {
          return {
          title: 'MyScene'
          };
       }

     render() {
       return (
       <View>
         <Text>Hi! My name is {this.props.title}.</Text>
       </View>
    )
     }
    }

注意`export default`关键,它代表这个组件被暴露出去,其他组件可以引用它.

上面来引用导入那些scene:

    import React, { Component } from 'react';
    import { AppRegistry } from 'react-native';

     import MyScene from './MyScene';

    class YoDawgApp extends Component {
      render() {
       return (
         <MyScene />
      )
      }
    }

    AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);

最近我们就有了贰个只是渲染那几个scene的app.

Networking

RN中有三大项指标网络操作:1.要好提供的Fetch API ; 贰.
协助的第二方库XMLHttpRequest;3.WebSocket方式

过多的手提式有线电话机应用须要从二个U昂CoraL获取数据.您大概想为贰个REST接口营造一个POST
request,也大概只是简单须求从3个服务器获取静态的内容.

Using Fetch

福特ExplorerN提供了1个fetchAPI进行互连网操作,正是把U帕杰罗L作为参数字传送进fetch函数:

Making requests
fetch('http://mywebsite.com/mydata.json')

Fetch还有第二个可选参数,允许你自定义HTTP请求.例如,你能够加二个报头,可能营造二个POST请求:

    fetch('https://mywebsite.com/endpoint/', {
     method: 'POST',
     headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
      },
     body: JSON.stringify({
        firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
      })
    })
Handing the response

地点例子呈现了怎么着请求一个request,以后来探望哪些处理3个响应。

网络操作是异步的。fetch方法将重临三个Promise对象开始展览异步的处理。

    function getMoviesFromApiAsync() {
    return fetch('https://facebook.github.io/react-native/movies.json'     )
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
     }

还足以应用ES20壹七的语法:

     async function getMoviesFromApi() {
    try {
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
     }

嗯,别忘了catch错误

Using Other Networking Libraries

那1节将的便是应用第3方库XMlHttpRequest来进展网络访问。

OdysseyN中内部接济了XMLHttpRequest.那代表你能够利用frisbee或者axios如此那般的第壹放库,当然一贯用XMLHttpRequest也可以。

    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
    if (request.readyState !== 4) {
    return;
     }

        if (request.status === 200) {
     console.log('success', request.responseText);
         } else {
        console.warn('error');
      }
    };

    request.open('GET', 'https://mywebsite.com/endpoint/');
    request.send();
WebSocket Support

RN也支持WebSocket

    var ws = new WebSocket('ws://host.com/path');
     ws.onopen = () => {
      // connection opened
     ws.send('something'); // send a message
    };
        ws.onmessage = (e) => {
      // a message was received
      console.log(e.data);
    };
    ws.onerror = (e) => {
      // an error occurred
      console.log(e.message);
    };
    ws.onclose = (e) => {
      // connection closed
      console.log(e.code, e.reason);
    };

Using Navigator

率先render多个你的Navigator,在内部写3个您本人的render
函数render你的scene,那些函数作为navigator的renderSceneprop.

    render() {
     return (
     <Navigator
      initialRoute={{ title: 'My Initial Scene', index: 0 }}
      renderScene={(route, navigator) => {
        return <MyScene title={route.title} />
      }}
    />
      );
    }

在您处理导航时你平常会境遇贰个概念叫route.route就是二个包罗了scene的新闻的对象.它用来为renderScene方法提供context,正是scene的元消息,比如title等.那么些新闻方可在您调用pushpop艺术时使用.

    navigator.push({
     title: 'Next Scene',
      index: 1,
    });
    navigator.pop();

上面是实际上的代码实例:
index.android/ios.js:

    import React, { Component } from 'react';
    import { AppRegistry, Navigator, Text, View } from 'react-native';
    import MyScene from './MyScene';

    class SimpleNavigationApp extends Component {
      render() {
      return (
          <Navigator
           initialRoute={{ title: 'My Initial Scene', index: 0 }}
          renderScene={(route, navigator) =>
            <MyScene
             title={route.title}

             // Function to call when a new scene should be displayed           
             onForward={ () => {    
                  const nextIndex = route.index + 1;
               navigator.push({
                  title: 'Scene ' + nextIndex,
                   index: nextIndex,
                });
               }}

            // Function to call to go back to the previous scene
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
      }
    }

    AppRegistry.registerComponent('SimpleNavigationApp', () =>            SimpleNavigationApp);

MyScene.js:

    import React, { Component, PropTypes } from 'react';
    import { View, Text, TouchableHighlight } from 'react-native';

    export default class MyScene extends Component {
     static propTypes = {
    title: PropTypes.string.isRequired,
    onForward: PropTypes.func.isRequired,
    onBack: PropTypes.func.isRequired,
    }
     render() {
     return (
       <View>
           <Text>Current Scene: { this.props.title }</Text>
                <TouchableHighlight onPress={this.props.onForward}>
             <Text>Tap me to load the next scene</Text>
           </TouchableHighlight>
            <TouchableHighlight onPress={this.props.onBack}>
           <Text>Tap me to go back</Text>
            </TouchableHighlight>
         </View>
        )
      }
    }

在地点的事例中,Myscene零件通过titleprop传递了route的title.
它显得了四个tappable组件,去调用通过它的prop传递的onForwardonBack函数.

得了下,rn这种导航方式正是用特有的navigator组件去完结,在特定的navigator中去renderscene.每三个scene在成立的时候要包含部分props,那个prop中的函数只是占了3个地方.在navigator中有3个route对象,这些目的提供了scene的音讯,能够获取.此时就能够来贯彻scene中从不落到实处的函数.

与此同时由于此时在navigator中,所以能够收获到叁个navigator对象,它有pop和push几个措施,能够控制这几个scene出栈和入栈.那样就兑现了导航效果.

More Resources

4858美高梅,React
Native不只是被某些公司(facebook)生产的2个出品。它是广大个开发者的叁个社区(community).所以假若你对奥德赛N感兴趣,不要紧看看上面那一个相关内容。

Popular Libraries

好呢,作为贰个昂科威N开发者,借使你不晓得React,额,快去学吧!

二个很常见的题材是怎样处理state,嗯,Redux快去看呢。那儿还有视频

Awesome React
Native顾名思义,懂的。

Example Apps

React Native
Playground

facebook的F8 conference
app,github地址,详尽教程

Development Tools

Nuclide,facebook使用的ide。(个人使用体验不太好,假诺是mac电脑,会在国内装atom的包,会不错)

Ignite

Codepush

Exponent

Deco

Where React Native People Hang Out

去哪个地方交换啊?

  1. React Native
    Community

  2. Reactiflux

  3. React
    Twitter

  4. React Naive
    Meetup

  5. React.js Conf 2016 in
    youtube

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有