WHS GIS Engineer

React Native从入门到放弃

2017-07-23
WHS

React Native 开发指南

使用JavaScript和React构建本地移动应用程序 React Native允许您仅使用JavaScript构建移动应用程序。它使用与React相同的设计,让您从声明组件构成丰富的移动UI。

环境配置

1.安装node.js

2.安装react-native命令行工具
npm install -g react-native-cli

3.新建项目
react-native init [ProjectName]

常用命令

升级新版本


1. 安装Git并设置环境变量

2. 安装react-native-git-upgrade工具模块
 $npm install -g react-native-git-upgrade

3. 进入项目目录下运行更新命令
 $ react-native-git-upgrade
 这样会直接把react native升级到最新版本
 或者是:
 $ react-native-git-upgrade X.Y.Z
 这样把react native升级到指定的X.Y.Z版本

降级版本

npm install --save react-native@版本号。
通过上诉操作之后,别忘了更新一下模板。
react-native upgrade

运行调试方法

To run your app on iOS:
   cd /Users/whs/AwesomeProject
   react-native run-ios
   - or -
   Open ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/whs/AwesomeProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

Google浏览器调试地址
http://localhost:8081/debugger-ui   

npm常用命令

#更新
npm install npm@latest -g

参考资料

常用组件


常见问题

问题描述

我是在Mac环境下,利用facebook开源的react-native创建原生app项目缓慢的问题

解决办法

1.确定自己的环境配置是否有问题
2.打开终端,输入命令行
brew install wget

3.npm config set registry=http://registry.npm.taobao.org/

问题描述

React Native unable to load script from assets index.android.bundle on windows

解决办法

1.在工程目录里建assets目录

2.运行命令
 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3.运行程序
react-native run-android

问题描述

Installing build/Build/Products/Debug-iphonesimulator/SCLYGZ.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

解决方法

使用Xcode打开项目运行解决问题

问题描述

Users/whs/Library/Developer/Xcode/DerivedData/SCLYGZ-cwawqpsnahyurjgkghwavkkokijl/Build/Intermediates.noindex/SCLYGZ.build/Debug-iphonesimulator/SCLYGZ.build/Script-00DD1BFF1BD5951E006B06BC.sh: line 3: ../node_modules/react-native/scripts/react-native-xcode.sh: No such file or directory

解决方法

change ../node_modules/react-native/packager/react-native-xcode.sh to ../node_modules/react-native/scripts/react-native-xcode.sh

Open in Xcode -> Select your Project -> “Build Phases” tab -> “Bundle React Native code and images” Then change the above paths.

或者

rm -rf node_modules 
rm -rf ~/.rncache
npm install
error: bundling failed: "Unable to resolve module `parse/react-native` from `/Users/whs/ReactNative/GZLYCY/js/setup.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

Similar Posts

Comments