ReactNative初体验

上个月全身心的投入研究了微信小程序，也完整的做了自认为还可以的项目，感觉很有乐趣,也学习到很多前端的一些知识。这个月开始研究ReactNative，说起ReactNative，大家应该都不会陌生，它的口号是'Learn once, write anywhere'，特点就是使用JavaScript 和React构建我们的应用，是一个真实的App(和web App和HTML有本质区别)，不需要重新编译，可以使用原生代码，对企业来说，最重要的点就是跨平台，一套代码可以在Android和iOS终端都能运行，这大大节约了开发成本并且能有效的缩短开发周期。总结几个词就是

• 跨平台
• 低投入高回报
• 性能高
• 支持自动更新

这篇文章主要内容

• windows平台环境搭建
• 常用ReactNative命令
• 创建自己的项目HelloReact
• 官方demo的运行及源码阅读

若已掌握上面知识点，即可关闭此文章，以免浪费时间，此文章无技术含量，只做笔记使用，谨慎阅读。
（学习的记录代码提交到GitHub，可点击查阅,是按照官方demo，并根据自己的学习理解而成）

node.js

ReactNative是基于node.js的，要想运行我们ReactNative应用，就需要安装node.js搭建本地服务器，node.js的安装相对简单，官网下载地址https://nodejs.org/en/download/根据自己的平台下载对对应的安装包，Windows平台选择msi文件，下载之后根据提示安装即可，然后通过打开cmd通过命令node -v查看是否安装成功，如果执行命令后显示出版本号则安装成功。

安装Android SDK

对于Android开发者，都已经安装有sdk，如果是你之前没有开发过Andoid，那么就需要安装java和android sdk了，对于java就不在说了，网上很多资料，android可以去官方网站下载Androidstudio,然后下载对应版本sdK,如果没有不想安装Androidstudio软件，可以直接安装sdk，也是通过此官网。下载安装后配置环境.通过计算机-->高级系统设置-->环境变量，新建变量变量名ANDROID_HOME，变量值为sdk目录，如D:\Android\sdk，选择path变量，点击编辑，在变量值最后追加（不能覆盖）%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools。
创建项目时默认Android SDK version 23 ,SDK build tools version 23.0.1 ,Android Support Repository >= 17 (for Android Support Library),所以你要选择安装上面版本sdk.

安装ReactNative

ReactNative源码在GitHub上托管，如果你安装了git，则在命令行输入下面命令检出项目

git clone https://github.com/facebook/react-native.git复制代码

如果没有安装git，可以在GitHub上点击clone or download，然后选择Download ZIP，下载成功解压就可以了。

安装命令行

打开cmd，进入react-native目录

cd react-native复制代码

然后通过命令安装react命令

npm install -g react-native-cli复制代码

执行这个命令较慢，下载速度一般都是十几k，可以使用镜像地址registry.npm.taobao.org ，或者科学上网。安装成功之后react的命令就可以使用了。
常用命令

//帮助
react-native -h

//查看ReactNative版本
react-native --version  

//升级
npm update -g react-native-cli

//查看本地ReactNaitve 版本信息
npm info react-native

//工程下载安装RN环境,根据配置文件package.json
npm install 

//初始化一个工程、并下载源代码和依赖包（时间较慢）
react-native init   项目名称

//运行Android项目
react-native run-android

//运行iOS项目
react-native run-ios

//根据package.json配置的RN版本,更新RN环境代码
react-native upgrade                     

//项目降级或升级到指定版本,记得react-native upgrade更新一下项目依赖等
npm install --save [email protected]     

//在android目录下操作打包
gradlew assembleRelease复制代码

创建自己的ReactNative项目

react-native init HelloNative复制代码

稍等一会后，命令行出现下面提示就表示项目初始化成功了，

To run your app on iOS:
   cd F:\HelloNative
   react-native run-ios
   - or -
   Open ios\HelloNative.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd F:\HelloNative
   Have an Android emulator running (quickest way to get started), or a device c
onnected
   react-native run-android复制代码

上面主要提示你运行项目的操作命令，通过cd 命令，也将操作目录切换到项目目录，如果想运行到iOS平台就可以运行命令react-native run-ios，或者使用Mac导入到Xcode中点击运行按钮，

如果要运行在Android平台上则在项目中执行命令react-native run-android,也可以使用AS。当然本人是搞Android开发的，就运行Android了，当然前提你要安装有模拟器，或者通过usb连接电脑，并将手机和电脑连到一个局域网中，设置ip和端口，端口号是8081。然后执行命令react-native run-android，执行命令后会自动开启node服务，默认端口是8081.然后会自动安装到模拟器或者手机上。你可以去项目下路径android\app\build\outputs\apk查看安装包。下面是创建的默认项目.现在大工告成。

image.png
如何修改项目呢，可以通过sumlime打开文件，在此我使用了webStorm打开项目，目录结构图如下

image.png
test是测试目录，android和ios分别对应平台代码，node_mmodules是项目依赖。package.json是一些版本配置信息。index.android.js和index.ios.js就是对应平台的入口了。

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

export default class HelloNative extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.android.js
        
        
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('HelloNative', () => HelloNative);复制代码

上面是es6的语法，import就是导入一些组件等信息，export defaul是将组件导出，暴露出来，供外部调用，对于RN来说是组件化开发，所以界面需要继承Component，并重写render方法，对于样式可以通过StyleSheet.create({}）统一管理。我们修改下render方法显示我们想要显示的内容，如下

 render() {
    return (
      
       Hello,我是第一次接触ReactNative
      
    );
  }复制代码

编辑保存后，点击模拟器菜单键弹出

image.png
然后选择reload就可以加载到更改后的内容了，不需要重新打包安装。图中你最常用的就是reload，第二个是调试用的，点击后会在浏览器显示调试页面，按F12就可以展示控制台的一些输出信息。第三个和第四个是动态加载和热更新加载。开启动态加载后，我们每次保存后就自动加载最新的内容，不需要在点击reload按钮了。注意使用真机调试摇一摇手机就出现这个按钮页面。

运行官网demo

到现在我们已经可以运行项目，并简单的更改项目了，那么对于刚开始入门的该怎么学习呢。我认为最好的资料就是官方文档以及官方提供的例子，文档就不用说了，直接去官方就能看到，那么主要介绍一下如何将官方的demo运行到手机上，下面以android为例，除了前面介绍的需要安装的，还需要安装ndk，下载链接如下

• Mac OS (64-bit) - dl.google.com/android/rep…
• Linux (64-bit) - dl.google.com/android/rep…
• Windows (64-bit) - dl.google.com/android/rep…
• Windows (32-bit) - dl.google.com/android/rep…

安装后配置环境变量，新建变量名ANDROID_NDK，变量值为安装目录。设置好之后进入文章开始检出的react-native项目,然后按如下操作

• 进入项目目录

  cd react-native复制代码

• 安装依赖包

  npm intstall复制代码

• 打包

  gradlew :RNTester:android:app:installDebug复制代码

• 进入脚本目录

  cd  scripts复制代码

• 启动包管理器

  packager.sh复制代码

  需要注意的是，官网提供打包命令./gradlew :RNTester:android:app:installDebug和脚本启动命令./scripts/packager.sh,在windows上不能运行。按上面操作即可。同样，执行打包后会自动安装，也可以到react-native\RNTester\android\app\build\outputs\apk目录找到安装包安装到手机或者模拟器。

rn.gif
运行的效果图如上，该demo中包含了所有组件的使用方法已经属性介绍，还介绍了api的使用，是不可多得的好材料，也是学习最可靠的材料。
至于阅读源码，我们至于从入口找即可，去android目录下查看源码，找到RNTesterApplication这个，他继承了Application 并且实现了ReactApplication，在该Application中有一个实现如下,它指定了js加载的入口，然后，去到该目录找到该文件即可。

 @Override
    public String getJSMainModuleName() {
      return "RNTester/js/RNTesterApp.android";
    }复制代码

好了，文章就介绍到这里。如果你感觉官网的demo太复杂或者运行复杂，可以检出我的学习记录的项目链接地址,共同学习。
如有错误，请指正，本人新手，谢谢。