React Native - 0序言

1. 什么是React Native?

　　React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架。主要编程语言是Javascript，UI使用JSX（一种语法类似于XML的UI描述语言），它使用虚拟DOM（Virtual DOM)，对DOM的修改完全在内存中完成，增量修改DOM树，运行效率非常高。

2. React Native和React.js有什么异同

相同：都是使用JSX和Javascript，他们都是将UI抽象成Virtual DOM

不同：React.js负责把Virtual DOM映射成实际的DOM，React Native则是把JSX描述的Virtual DOM转换成Android和iOS的本地控件。

3. 为什么要使用React Native

　　基于React Native的App在运行效率上接近Native App，而且还拥有混合开发模式的两个优点：热更新（无需重新编译上传App，不需要通过App Store审核）和跨平台（降低学习成本，使用同样的技术开发）

时间： 2024-07-28 13:17:36

React Native - 0序言的相关文章

React Native 0.31 Bundle 预加载优化

使用 React Native 开发混合应用的过程中,我们在打完 bundle 进 release 包后,会发现第一次进入页面(React 的 Activity)会有一个短暂的白屏过程(在真机上近 1秒,在模拟器上比较快,在 200毫秒 左右),而且在完全退出后再进入,仍然会有这个白屏. 仔细查看加载过程(其实猜猜都能知道)后可以发现,这个过程就是在加载我们的 js bundle,通常即便是一个小的 RN 应用(混合应用中的子业务),也会动辄到 1MB 的大小,除非是完整的 RN 应用,可以把这

react native 0.56.0版本在windows下有bug不能正常运行

react native的0.56.0版本在windows下有bug不能正常运行请init 0.55.4的版本 react-native init MyApp --version 0.55.4 注意version前是两个杠 原文地址:https://www.cnblogs.com/fancing/p/9520786.html

react native 0.50 源码解析 再出发 持续更新

1.核心类 1.1 RCTRootView 一个RCTRootView持有一个RCTBridge成员变量 RCTRootView : UIView RCTBridge *bridge; UIViewController *reactViewController; UIView *contentView; UIView *loadingView; 1.2 RCTBridge 一个RCTBridge持有一个RCTCxxBridge成员变量 RCTBridge.h @interface RCTBrid

pod installation failed with react native 0.44

今天在集成react-native-sqlite-storage组件CocoaPods的时候遇到以下错误,这里记录一下错误解决方法: 报错如下: 以为是我Cocoapods的版本问题,于是更新版本: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #36be29; background-color: #080808 } span.s1 { } sudo gem install cocoapods --pre 再

React Native入门（一）环境搭建与Hello World

前言 目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁.因此我来写一个简洁的教程.本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者. 1.配置React Native 首先我们要先来安装一些软件,如下所示. Chocolatey Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件.我们打开cmd命令行程序使用如

React Native学习（四）—— 写一个公用组件（头部）

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.总览 头部通常分为左.中.右三部分,效果图如下: 二.头部组件 1.创建components文件夹,新建commonHead.js 2.commonHead.js 头部分为左.中.右三块,我们需要提供接口,获取外部传入的值,从而判断哪一块需要创建. static propTypes =

React Native学习（八）—— 对接七鱼客服

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 本文参考 https://github.com/qiyukf/react-native-qiyu 一.安装 npm install react-native-qiyu --save 二.配置 修改android/settings.gradle,手动加入以下代码 include ':react

React Native学习（九）—— 使用Flexbox布局

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.主轴方向 flexDirection flexDirection决定主轴的排列方向. 1.column--竖直(默认) 2.row--水平 二.主轴排列方式 justifyContent justifyContent决定其子元素沿着主轴的排列方式.(以下例子主轴方向为row) 1.fle

在 React Native 中使用 moment.js 無法載入語系檔案

moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以只寫 moment().get('year'),可讀性增強許多. 問題 React Native 0.29.x 預設使用 ES6,並支援 import 語法.問題出在如果遵照官方網站的說明去載入語系檔,會發生找不到模組 (cannot find module) 的錯誤.推測可能是 moment.js