ReactNative环境编译器相关技术

2018-04-03 本文已影响8人 zcwfeng

写这篇文章的目的就是节省时间,方便工作环境,每次到文档查询,总是耗时查找,文档总是杂乱但是全面却不是我们需要的.

React Native 组件搜集

https://github.com/react-navigation/react-navigation
https://github.com/react-community/create-react-native-app

React Native 用法前瞻

Create React Native App

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

创建项目之后,可以使用yarn管理运行命令

Inside that directory, you can run several commands:

  yarn start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  yarn run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  yarn run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.
  

  yarn test
    Starts the test runner.

  yarn run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!


We suggest that you begin by typing:

  cd HeroTV
  yarn start

React Native 相关环境编译器等总结(参考https://reactnative.cn/)方便更换工作环境

环境搭建(有vpn可以用官网不用指定源)

brew install node
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

yarn 替代 npm install

npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

权限

sudo chown -R whoami /usr/local

推荐工具 watchman vscode

brew install watchman
brew install flow

VS Code 开发使用插件

测试安装

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3 注意版本号必须精确到两个小数点。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

升级项目React native

安装了git环境
安装react-native-git-upgrade工具模块 $ npm install -g react-native-git-upgrade
运行更新命令 $ react-native-git-upgrade 这样会直接把react native升级到最新版本
或者 $ react-native-git-upgrade X.Y.Z 这样把react native升级到指定的X.Y.Z版本

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

解决冲突

例子

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的官方代码。然后你可以根据实际情况判断，选择某一方晋级，另一方出局

项目老式升级方案

更新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。

升级项目模板文件

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

$ react-native upgrade

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

如果是新添加的文件，则直接创建。
如果文件和当前版本的文件相同，则跳过。
如果文件和当前版本的文件不同，则会提示你一些选项：查看两者的不同，选择保留你的版本或是用新的模板覆盖。你可以按下h键来查看所有可以使用的命令。

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

手动升级

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

升级老项目问题:解决CFBundleIdentifier", Does Not Exist

mac环境下，在命令行中run-ios构建时报错：[CFBundleIdentifier", Does Not Exist](http://www.cnblogs.com/yazhengwang/p/7237871.html)

打开XCode，进入.xcodeproj文件，运行，编译时报错:['boost/iterator/iterator_adaptor.hpp' file not found’](http://www.cnblogs.com/yazhengwang/p/7237871.html)

经过多次测试，这个问题只在react native 0.45.0及以后的版本中出现。

在网上找到解决方法如下：

这个问题产生原因：

/Users/你的用户名/.rncache中boost_1_63_0.tar.gz，double-conversion-1.1.5.tar.gz，folly-2016.09.26.00.tar.gz，glog-0.3.4.tar.gz文件不完整。或者node_modules/react-native/third-party 文件不完整。

具体操作：

1、删除/user/你的用户名/.rncache目录下的boost_1_63_0。重新下载,下载网址http://www.boost.org/users/history/version_1_63_0.html

2、打开命令行工具，在项目目录下输入rm -rf node_modules && rm -rf ~/.rncache && yarn

3、npm install 

4、react-native upgrade

解决镜像问题,CN网路万恶之源eact-native初始化项目时候报错？Error: Command failed: yarn add react-native --exact

试着又执行了下面两句后竟然解决问题了，感觉有些莫名其妙，因为我之前已经设置过，并且一直也没出现这个问题，你如果没解决的话试试
npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org/)
npm config set disturl [https://npm.taobao.org/dist](https://npm.taobao.org/dist)

ReactNative环境编译器相关技术

React Native 组件搜集

React Native 用法前瞻

React Native 相关环境编译器等总结(参考https://reactnative.cn/)方便更换工作环境

环境搭建(有vpn可以用官网不用指定源)

升级项目React native

项目老式升级方案

手动升级

升级老项目问题:`解决CFBundleIdentifier", Does Not Exist`

解决镜像问题,CN网路万恶之源`eact-native初始化项目时候报错？Error: Command failed: yarn add react-native --exact`

猜你喜欢

热点阅读

ReactNative环境编译器相关技术

React Native 组件搜集

React Native 用法前瞻

React Native 相关环境编译器等总结(参考https://reactnative.cn/)方便更换工作环境

环境搭建(有vpn可以用官网不用指定源)

升级项目React native

项目老式升级方案

手动升级

升级老项目问题:解决CFBundleIdentifier", Does Not Exist

解决镜像问题,CN网路万恶之源eact-native初始化项目时候报错？Error: Command failed: yarn add react-native --exact

猜你喜欢

热点阅读

升级老项目问题:`解决CFBundleIdentifier", Does Not Exist`

解决镜像问题,CN网路万恶之源`eact-native初始化项目时候报错？Error: Command failed: yarn add react-native --exact`