Reactive Native环境搭建(Android)

来源:互联网 发布:淘宝男鞋高仿店推荐 编辑:程序博客网 时间:2024/04/30 00:00

官网

官网 http://facebook.github.io/react-native/

中文官网 http://reactnative.cn/

步骤

前提:提前安装好npm、node(最好是最新版)、Android Studio、SDK6.0

  1. 安装python 2.+

    • 网址:https://www.python.org/downloads/release/python-2713/
    • 配置python环境变量(安装时,勾选add to path,可以略过此步)
    • 验证:cmd->python
  2. 安装react native客户端

    npm intall -g react-native-cli
    • 如果安装慢可以使用淘宝镜像:(注意,和nvm的淘宝镜像地址不一样)

      npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
    • 验证:

      npm config get registrynpm config get disturl
    • 如果没有更换成功,可以尝试去掉‘–global’

  3. 开启硬件加速 (BIOS中打开Intel Virtual Technology和VT-x)
  4. 打开Android模拟器或者连接Android手机
  5. Hello World
    基本上和react创建项目差不多
    cmd->

    //初始化一个项目react-native init first//打开项目所在目录cd first//开始react-native startreact-native run-android
    • 使用一个cmd去react-native start启动服务,再使用一个cmd去react-native run-android运行项目
    • 第一次构建的时候要下载一大堆东西,因为我修改了gradle的位置,所以比较慢(gradle2.14.1大概60M)。所以要是有条件,还是使用科学上网吧。如果没有修改位置,就在C盘的.gradle下,应该会比较快。
  6. 耍一下

    • 真机(小米note)我没有运行起来,只有一个空白界面。
    • 模拟器:
      这里写图片描述
    • 试试官网上说的:

      Modifying your app
      Now that you have successfully run the app, let’s modify it.
      Open index.android.js in your text editor of choice and edit some lines.
      ==Press the R key twice or select Reload from the Developer Menu to see your change!==

      修改文字:

      <Text style={styles.welcome}>  Welcome to React Native!</Text>

      ==>

      <Text style={styles.welcome}>  Welcome to React Native! 我是大帅哥</Text>

      ==>按两下R

      这里写图片描述

      666666

0 1
原创粉丝点击