React Native环境配置和简单使用

2016-10-22 08:50:56来源:CSDN作者:yeshaojian人点击

React Native 开发环境配置


  • 在安装 React Native 之前我们需要先配置一下所需的开发环境,具体详细见下面

  • 环境要求

    • 安装 Homebrew( Homebrew 是 OSX 的套件管理器,我们可以通过它获取并安装很多需要的组件
      • 安装方式:打开 Mac 的终端 → 粘贴命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
      • 验证是否安装成功:打开 Mac终端 → 粘贴命令 brew -v,出现类似下列提示表示安装成功

    Homebrew安装成功

  • 安装 WatchMan(该插件用于监控bug文件和文件变化,并且可以出发指定的操作)

    • 安装方式:打开Mac的终端 → 粘贴命令 brew install watchman
    • 验证是否安装成功:待看到类似以下的提示表示安装成功

    WatchMan安装成功

  • 安装 Flow(flow 是一个 JavaScript 的静态类型检查器,方便找出代码中可能存在的类型错误)安不安装看个人,推荐安装

    • 安装方式:打开Mac的终端 → 粘贴命令 brew install flow
    • 注意事项:(如果提示 command not found,需要在命令前加上sudo获得最高权限) - 验证是否安装成功:待看到类似以下的提示表示安装成功

    Flow安装成功

  • 安装 npm 和 Node.js

    • Node.js 最好安装4.0及更高版本,Node 内包含了 npm,所以直接下载Node.js安装
    • 下载方式:选择各自系统版本下载

    node安装

正式安装 React Native


  • 安装 React Native

    • 安装方式:打开Mac的终端 → 粘贴命令 npm install -g react-native-cli
    • 注意事项:(如果提示command not found或者出现一大堆error提示的,在确保已经安装npm的情况下需要在命令前加上 sudo 获得最高权限)

    错误

  • 验证是否安装成功:

    React Native安装成功

安装 iOS 和 Android 开发环境


  • iOS需求:Xcode7及以上更高版本

  • Android 需求

    • 下载安装最新版Android studio
      • 方式一:可以安装 Android studio 省略下面的步骤(推荐)
      • 建议提前修改下 hosts,要不稍后下载sdk特别慢
        • 命令行:sudo sudo vi /etc/hosts/ → 添加203.208.46.146 dl.google.com
          45 203.208.46.146 dl-ssl.google.com → :wq 保存退出
    • 方式二:(比较麻烦,需要配置)
      • 安装 Android SDK
        • 安装方式:brew install android-sdk
        • 验证是否安装成功:

    Android SDK安装成功

  • 定义 Android_HOME 环境变量

    • 确保 Android_HOME 环境变量指向已经安装的 Android SDK 目录(路径~/.bashrc,~/.bash_profile或者终端所用的其它配置文件中增加下面的内容)


        # 如果你是通过Homebrew安装SDK的,则加入下列路径    export ANDROID_HOME=/usr/local/opt/android-sdk    # 否则加入下列路径    export ANDROID_HOME=~/Library/Android/sdk
  • 设置SDK

    • 打开Android SDK Manager(Mac用户在终端下输入 android)→ 选中以下项目


        Android SDK Build-tools version 23.0.1(这个必须版本严格匹配23.0.1)            Android 6.0 (API 23)    Local Maven repository for Support Libraries(之前叫做Android Support Repository)
  • 具体设置看下面的动态图(这边我就只安装常用的)
    设置SDK.gif

  • 安装 Genymotion(Genymotion 是第三方模拟器,比起Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费)

    • Genymotion下载安装
    • 打开Genymotion,如果没有安装VirtuaIBox,会提示安装
      安装VirtualBox
    • 创建一个模拟器并启动
    • 按下Mac快捷键 cmd + M 可以打开开发者菜单(在安装并启动了React Native应用后可用

测试 React Native 等各项功能是否正常


  • 生成新工程

    • 打开 Mac 的 终端 → 粘贴命令 react-native init 项目名称(这边我们就用react-native init TestRN),成功后会出现以下提示
      新建工程1
      新建工程2

    • 注意事项:这边需要注意的是,速度快慢和网络情况有关(React-Native命令行需要从npm官方源下载代码会遇上麻烦,可以将npm仓库源替换成国内镜像)

      • 方式:打开 Mac 的终端 → 粘贴下面命令
        • npm config set registry https://registry.npm.taobao.org
        • npm config set disturl https://npm.taobao.org/dist

工程目录结构分析


  • 现在我们的新工程(TestRN)已经配置好了,那么生成的文件都在哪里呢?不知道上面的图中有没有发现,其实已经提示我们路径就是如下图标记出来的位置
    工程路径

  • 打开我们的TestRN,我们可以看到默认生成了 iOS 和 Android 两个平台的原生项目

  • 除了这些之外,还有 index.ios.js 和 index.android.js (这就是入口),node_modules文件夹是为Node.js存放和管理npm包资源,也包含React Native框架文件
    目录结构

在 iOS 上运行第一个 React Native 应用


  • 使用 Xcode 打开我们 iOS 文件夹中的工程

  • 运行工程文件(不管 iOS 还是 Android,在开发阶段都需要在系统上启动一个HTTP服务 —— Debug Server,默认运行在8081端口,APP通过它加载js)

  • 注意事项:这个窗口不要关闭
    本地服务器

  • 运行效果

    iOS运行效果.gif

在 Android 上运行第一个 React Native 应用


  • 方式一:如果是安装了 Android studio 的朋友可以直接使用它运行

  • 方式二:命令行打开项目主目录(我这边路径为/Users/yeshaojian/TestRN):cd /Users/yeshaojian/TestRN → 命令行:react-native run-android → 第一次运行的话会下载模拟器

  • 注意事项:这个窗口不要关闭
    本地服务器

  • 运行效果
    安卓运行效果

如何查看和修改代码


  • 我习惯使用 WebStrom 这个 HTML 开发神器,这边就以这款神器为例

  • 目录结构
    目录结构

  • 这边就以 iOS 为例,我们点击index.ios.js就可以查看代码了,接下来看看大概部分

    引用部分

    入口部分

    样式部分

    注册部分

  • 修改代码(我们将 Welcome to React Native! 修改成 hello Word!)

    export default class TestRN extends Component {        render() {            return (                <View style={styles.container}>                    <Text style={styles.welcome}>                        hello Word!                    </Text>                    <Text style={styles.instructions}>                    To get started, edit index.ios.js                    </Text>                    <Text style={styles.instructions}>                    Press Cmd+R to reload,{'/n'}                    Cmd+D or shake for dev menu                    </Text>                </View>            );        }    }
  • 在模拟器上使用 cmd + R 就可以刷新了

    iOS修改效果.gif

管理 React Native 版本


  • 因为 React Native 经常更新,我们开发中也经常需要控制它的版本库,来做到适配各种条件下的开发,那么如何查看和控制版本,在网上搜了一些资料整理后感觉下面的方式还是比较方便的分享给大家

  • 查看本地的 React Native 版本

    • 命令行:react-native --version
      查看本地的 React Native 版本
  • 更新本地的 React Native 的版本

    • 命令行:npm update -g react-native-cli
  • 查询 react-native 的 npm 包最新版本

    • 方式一:npm包地址
    • 方式二:npm info react-native
      查询react-native的npm包最新版本
    • 方式三:项目中查看当前 npm 包版本
      项目中查看当前 npm 包版本
  • 升级或降级 npm 包的版本

    • 命令行:npm install --save react-native@0.18
  • 更新项目 templates 文件(新的npm包会包含更新运行在 react-native init 命令生成的一些动态文件,比如 init 创建项目的时候会生成 iOS 和 Android 的子项目,我们可以通过下面的命令获取最新代码)

    • 命令行:react-native upgrade

WebStom设置React Native代码提示


  • [点击从 gitHub 上下载xml插件](git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate)

  • 安装

    • 将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates → 重启 WebStrom

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台