zoukankan      html  css  js  c++  java
  • React-Native 基本环境的搭建

    看了一些RN资料,仅仅了解到人们对 RN(以下简称 React_native 框架) 的使用描述以及评价,就觉得RN是一个很不错的框架,值得学习。
    今天就开始写我的学习记录,也给大家分享一下。下面进入正题:
    环境的搭建:
    1、推荐使用 HomeBrew 来安装 node 、watchman、flow
    2、使用 brew install node 来安装 node
    3、使用命令 brew install --HEAD watchman 来安装 watchman .推荐安装 watchman 否则我们会需要一个 node 文件来监控开发中的 bug.
    4、使用命令行 brew install flow 如果要使用 flow 的话。

    使用命令行 npm install -g react-native -cli
    使用命令行 react -native init jwFist_RN_Project
    使用命令行 cd jwFirst_RN_Project




    将程序通过命令行开始运行
    cd /Users/mac/jwFirst_RN_Project
    react-native run-iso

    这时候终端是长这样子的:





    CAB2BFA4-2495-4662-A7B6-DCBBD5384CAF.png
    或者可以打开程序的位置进行手动的运行。
    /Users/mac/jwFirst_RN_Project/ios/jwFirst_RN_Project.xcodeproj


    最后出现这个就说明成功了。



    下面对使用命令行创建的 RN 程序做下简要的说明,方便自己记忆:



    react -native 命令初始化 jwFirst_RN_Project 的时候都做了些什么事情?
    1、新建的一个名为 jwFirst_RN_Project 的文件夹。
    2、在这个文件夹中创建了 package.json
    3、npm insatll —save react-native 命令开始运行,这个命令的作用是安装了 react-native 的依赖,这些依赖放在 jwFirst_RN_Project/node_modules文件夹中,在 jwFirst_RN_Project/package.json 声明了 react-native 作为项目的依赖。
    4、全局安装 react-native CLI (就是 react-native 的命令行工具) 并将控制权交给本地的 CLI 工具,就是 jwFirst_RN_Project/node_modules/react-native/local-cli/cli.js 文件。
    5、接下来生成 jwFirst_RN_Project/node_modules/react-native/init.sh 文件,这个文件是用来生成标准代码的脚本,比如 index.ios.js 文件,IOS 文件夹中的 OC 代码,以及 jwFirst_RN_Project 中的相关 Xcode 的项目配置。

    React-Native (下面简称为 RN),RN 是基于 javaScript 的,这些 javaScript 代码在 index.ios.js 中组成一个真是的应用。
    package.json 它定义了项目的一些元数据,更重要的是它声明了我们的项目对 RN 的依赖。
    node_modules 文件夹是在 npm install 进行项目初始化的时候生成的,它包含 RN 的源代码,其他 npm 的依赖,大量的 JavaScript 代码,和OC 代码。
    初始化进程也提供了基本的Xcode项目和定义一些附加的OC样板代码,它允许我们在Xcode中打开一个项目并运行一个项目,而不需要其他的任何条件。我们可以通过RN来简化这些步骤与流程。
    如果要讲第三方库整理到 RN 项目中,需要在根目录下增加 Podfile 文件。Podfile 是一个类似于 package.json 的东西,它为 CocoaPods 做依赖管理,声明了OC 库的依赖。
    jwFirst_RN_Project 项目是一个 Xcode 项目,是一个 NPM 项目,是一个基于 JavaScript 的 RN 项目,也包含了好多的 IOS 胶水代码,用来让 JavaScript 代码运行在 iOS 环境中。

    下面是我在两台电脑上分别进行安装 RN 的时候遇到的问题:
    使用命令行 npm install -g react-native -cli 的时候遇到问题,如图:


    解决办法:参照网上的方法
    输入命令行:sudo npm install -g hero-cli
    最后终于解决了

    但是后来又在另一台电脑上进行安装 RN 环境,又遇到了该问题,最后查阅资料解决了:
    记录如下:
    遇到问题
    在安装 React-Native 的时候,遇到权限的问题,最后通过两行命令解决(参考:https://docs.npmjs.com/getting-started/fixing-npm-permissions)
    1、找到 npm 的路径,命令行:npm config get prefix
    运行的结果可能是:
    /usr/local.
    2、改变 npm 的路径到当前的用户路径,命令行:
    sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
    可以看到如下图,权限问题已经解决。



    目前 RN 尚不稳定,这里仅仅做当前的实验,以后遇到问题了再补充,先分享给大家。

  • 相关阅读:
    [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
    便利店选址
    spoj 1811 Longest Common Substring (后缀自动机)
    sharepoint 2013 根据网站模版创建网站,并赋值网站权限 create a site by custom site template
    一则 ORA-00471 处理方法
    好端端的项目重新运行的时候却不行了!!!
    C语言指针和数组知识总结(下)
    Java EE登陆界面生成随机数防止恶意注册或者登录
    ASP.NET获取上传图片的大小
    Not able to reset SmartRF04DD
  • 原文地址:https://www.cnblogs.com/benpaobadaniu/p/6024326.html
Copyright © 2011-2022 走看看