React Native环境配置和简单使用

smallkoala 发布于1年前 阅读12468次
0 条评论

 

React Native 开发环境配置

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

  • 环境要求

    React Native环境配置和简单使用

    • 安装方式:打开 Mac 的 终端 → 粘贴命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    • 验证是否安装成功:打开 Mac 终端 → 粘贴命令 brew -v ,出现类似下列提示表示安装成功

    • 安装 Homebrew( Homebrew 是 OSX 的套件管理器,我们可以通过它获取并安装很多需要的组件

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

      React Native环境配置和简单使用

      • 安装方式:打开Mac的 终端 → 粘贴命令 brew install watchman

      • 验证是否安装成功:待看到类似以下的提示表示安装成功

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

      React Native环境配置和简单使用

      • 安装方式:打开Mac的 终端 → 粘贴命令 brew install flow

      • 注意事项:(如果提示 command not found,需要在命令前加上sudo获得最高权限) - 验证是否安装成功:待看到类似以下的提示表示安装成功

    • 安装 npm 和 Node.js

      React Native环境配置和简单使用

      • Node.js 最好安装4.0及更高版本,Node 内包含了 npm,所以 直接下载Node.js 安装

      • 下载方式:选择各自系统版本下载

    正式安装 React Native

    • 安装 React Native

      React Native环境配置和简单使用

      • 安装方式:打开Mac的 终端 → 粘贴命令 npm install -g react-native-cli

      • 注意事项:(如果提示command not found或者出现一大堆error提示的,在确保已经安装npm的情况下需要在命令前加上 sudo 获得最高权限)

    • 验证是否安装成功:

      React Native环境配置和简单使用

    安装 iOS 和 Android 开发环境

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

    • Android 需求

      React Native环境配置和简单使用

      • 安装 Android SDK

      • 安装方式:brew install android-sdk

      • 验证是否安装成功:

      • 方式一:可以安装 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_HOME 环境变量

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

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

      • 设置SDK

        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)

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

      • 具体设置看下面的动态图(这边我就只安装常用的)

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

        • Genymotion下载安装

        • 打开Genymotion,如果没有安装VirtuaIBox,会提示安装
          React Native环境配置和简单使用

        • 创建一个模拟器并启动

        • 按下Mac快捷键 cmd + M 可以打开开发者菜单( 在安装并启动了React Native应用后可用

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

      • 生成新工程

        • 终端

          方式:打开 Mac 的 终端 → 粘贴下面命令

        • npm config set registry https://registry.npm.taobao.org

        • npm config set disturl https://npm.taobao.org/dist

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

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

        工程目录结构分析

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

          React Native环境配置和简单使用
        • 打开我们的TestRN,我们可以看到默认生成了 iOS 和 Android 两个平台的原生项目

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

          React Native环境配置和简单使用

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

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

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

        • 注意事项:这个窗口不要关闭

          React Native环境配置和简单使用
        • 运行效果

          React Native环境配置和简单使用

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

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

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

        • 注意事项:这个窗口不要关闭

        • 运行效果

          React Native环境配置和简单使用

        如何查看和修改代码

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

        • 目录结构

          React Native环境配置和简单使用
        • 这边就以 iOS 为例,我们点击index.ios.js就可以查看代码了,接下来看看大概部分

          React Native环境配置和简单使用

          React Native环境配置和简单使用

          React Native环境配置和简单使用

          React Native环境配置和简单使用

        • 修改代码(我们将 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 就可以刷新了

          React Native环境配置和简单使用

        管理 React Native 版本

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

        • 查看本地的 React Native 版本

          • react-native --version

            命令行: react-native --version

            React Native环境配置和简单使用

        • 更新本地的 React Native 的版本

          • 命令行: npm update -g react-native-cli

        • 查询 react-native 的 npm 包最新版本

          • 方式一: npm包地址

          • 方式二: npm info react-native
            React Native环境配置和简单使用

          • 方式三:项目中查看当前 npm 包版本
            React Native环境配置和简单使用

        • 升级或降级 npm 包的版本

          • 命令行: npm install --save react-native@0.18

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

          • 命令行:react-native upgrade

        WebStom设置React Native代码提示

        需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。