美文网首页
React Native工程创建

React Native工程创建

作者: Juvid | 来源:发表于2018-05-14 16:34 被阅读0次

    安装RN

    安装brew:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

    安装到下面这步就行了

    然后在项目根目录执行:

    npm install

    React Native工程创建

    1、自动创建新工程(无package.json

    react-native init (工程名)

    cd (工程名)

    react-native run-ios

    2、手动创建RN工程

    1)复制文件到工程目录

    node_modules,package.json(name改成工程名),index.ios.js(AppRegistry.registerComponent(‘工程名’, () => 类名);)

    2)添加依赖库

    node_modules/react-native/React/React.xcodeproj

    node_modules/react-native/Libraries/Image/RCTImage.xcodeproj

    node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj

    node_modules/react-native/Libraries/Text/RCTText.xcodeproj

    node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj

    node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj

    node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj

    node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj 

    3)添加framework 

    libicucore.tbd

    libstdc++.tbd

    libz.1.1.3.tbd

    4)添加run script

    export NODE_BINARY=node

    ../node_modules/react-native/packager/react-native-xcode.sh

    5Build Settings相关

    添加-ObjC 

    添加Header Search Paths

    $(SRCROOT)/../node_modules/react-native/React(..表示工程文件上级目录,视情况修改路径)

    升级RN

    基于Git的自动合并更新#

    重要提示: 现在你不需要运行npm install去下载新版本的React Native了,按照下面的步骤即可自动进行更新。

    1. 安装Git#

    你需要安装Git,但这并不要求你自己使用Git去管理项目。只是我们的更新过程会使用到Git罢了。你可以在这里下载安装Git,注意要把git的路径添加到PATH变量中。

    2. 安装react-native-git-upgrade工具模块#

    $ npm install -g react-native-git-upgrade

    react-native-git-upgrade提供了豪华的一条龙自动合并更新流程,主要包含两个服务:

    • 首先它会利用Git工具计算新旧版本文件间的差异并生成补丁

    • 然后在用户的项目文件上应用补丁

    3. 运行更新命令#

    $ react-native-git-upgrade

    # 这样会直接把react native升级到最新版本

    # 或者是:

    $ react-native-git-upgrade X.Y.Z

    # 这样把react native升级到指定的X.Y.Z版本

    升级过程会如丝般顺滑。当然在少数情况下,取决于具体的版本和你修改的程度,Git的合并算法也可能遭遇失败产生一些冲突,需要你人工介入。

    4. 解决冲突#

    文件中的冲突会以分隔线隔开,并清楚的标记出处,例如下面这样:

    13B07F951A680F5B00A75B9A /* Release */ = {

      isa = XCBuildConfiguration;

      buildSettings = {

        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;

    <<<<<<< ours

        CODE_SIGN_IDENTITY = "iPhone Developer";

        FRAMEWORK_SEARCH_PATHS = (

          "$(inherited)",

          "$(PROJECT_DIR)/HockeySDK.embeddedframework",

          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",

        );

    =======

        CURRENT_PROJECT_VERSION = 1;

    >>>>>>> theirs

        HEADER_SEARCH_PATHS = (

          "$(inherited)",

          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,

          "$(SRCROOT)/../node_modules/react-native/React/**",

          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",

        );

    上面代码中的"ours"表示你自己的代码,而"theirs"表示React Native的官方代码。然后你可以根据实际情况判断,选择某一方晋级,另一方出局

    老式升级方案#

    如果上面的自动升级流程有问题,那么你可以尝试一下下面的老的升级方案。

    1. 更新react-native的node依赖包#

    请去下面的网址查看react-native的npm包的最新版本,或使用npm info react-native命令查看。

    https://www.npmjs.com/package/react-native

    打开项目目录下的package.json文件,然后在dependencies模块下找到react-native,将当前版本号改到最新,然后在命令行中运行(译注:如果提示权限错误,就在命令前加上sudo):

    $ npm install

    译注:从0.24版本开始,react-native还需要额外安装react模块,且对react的版本有严格要求,高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react模块版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程中的报错信息,例如require react@某.某.某版本, but none was installed,然后根据这样的提示,执行npm install react@某.某.某版本 --save。

    2. 升级项目模板文件#

    新版本的npm包通常还会包含一些动态生成的文件,这些文件是在运行react-native init创建新项目时生成的,比如iOS和Android的项目文件。为了使老项目的项目文件也能得到更新(不重新init),你需要在命令行中运行:

    $ react-native upgrade

    这一命令会检查最新的项目模板,然后进行如下操作:

    • 如果是新添加的文件,则直接创建。

    • 如果文件和当前版本的文件相同,则跳过。

    • 如果文件和当前版本的文件不同,则会提示你一些选项:查看两者的不同,选择保留你的版本或是用新的模板覆盖。你可以按下h键来查看所有可以使用的命令。

    译注:如果你有修改原生代码,那么在使用upgrade升级前,先备份,再覆盖。覆盖完成后,使用比对工具找出差异,将你之前修改的代码逐步搬运到新文件中。

    手动升级#

    有时候React Native的项目结构改动较大,此时还需要手动做一些修改,例如从0.13到0.14版本,或是0.28到0.29版本。所以在升级时请先阅读一下更新日志,以确定是否需要做一些额外的手动修改。搭建开发环境

    在GitHub上修改这篇文档

    支持我们

    欢迎使用React Native!这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境,那么可以尝试一下编写Hello World

    根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。

    目标平台: iOS Android 开发平台: macOS Linux Windows

    译注:如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程windows环境搭建文字教程、以及常见问题

    ######### LINUX AND WINDOWS for iOS #####################

    安装#

    必需的软件#

    Homebrew#

    Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local

    Node#

    使用Homebrew来安装Node.js.

    React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。

    brew install node

    安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

    npm config set registry https://registry.npm.taobao.org --global

    npm config set disturl https://npm.taobao.org/dist --global

    Yarn、React Native的命令行工具(react-native-cli)#

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli

    安装完yarn后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global

    yarn config set disturl https://npm.taobao.org/dist --global

    如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

    sudo chown -R `whoami` /usr/local

    Xcode#

    React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

    虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

    推荐安装的工具#

    Watchman#

    Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

    brew install watchman

    Flow#

    Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

    brew install flow

    Nuclide#

    Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行调试React Native应用。

    点击这里阅读Nuclide的入门文档

    译注:我们更推荐使用WebStormSublime Text来编写React Native应用。

    测试安装#

    react-native init AwesomeProject

    cd AwesomeProject

    react-native run-ios

    你也可以在Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

    修改项目#

    现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

    • 使用你喜欢的编辑器打开index.ios.js并随便改上几行。

    • 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

    完成了!#

    恭喜!你已经成功运行并修改了你的第一个React Native应用。

    相关文章

      网友评论

          本文标题:React Native工程创建

          本文链接:https://www.haomeiwen.com/subject/pfjjdftx.html