React Native 入门尝试

React Native 入门

React Native 是 Facebook 开源的移动应用框架，支持 iOS 和 Android。

Nodejs 6+, NPM v3, v4

创建项目

创建项目使用到的脚手架有：create-react-native-app 和 react-native-cli。

create-react-native-app

通过下述的命令启动项目后，还需要在移动设备端安装 Expo Client 的 APP，然后通过 Scan QR Code 进行项目的模拟调试。

# 使用 NPM 命令安装
npm i -g create-react-native-app
# 创建项目
create-react-native-app AwesomeProject
# 启动项目
cd AwesomeProject
npm start
项目结构
.
├── .babelrc
├── .flowconfig
├── .gitignore
├── .watchmanconfig
├── App.js
├── App.test.js
├── README.md
├── app.json
├── node_modules
└── package.json
遇到的一些问题
npm ERR! AwesomeProject@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1

# kern.maxfiles: 12288 -> 5242880
sudo sysctl -w kern.maxfiles=5242880
# kern.maxfilesperproc: 10240 -> 1048576
sudo sysctl -w kern.maxfilesperproc=524288

react-native-cli

# 使用 NPM 命令安装
npm i -g react-native-cli
# 初始化项目
react-native init HelloWorld
# 启动项目
react-native run-ios

# 获取设备列表
xcrun simctl list devices
# adb devices
# 在指定的设备上启动
react-native run-ios --simulator "iPhone 7 Plus”
项目结构
.
├── .DS_Store
├── .babelrc
├── .buckconfig
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .watchmanconfig
├── A.txt
├── App.js
├── __tests__
│   └── App.js
├── android
│   ├── app
│   │   ├── BUCK
│   │   ├── build.gradle
│   │   ├── proguard-rules.pro
│   │   └── src
│   │       └── main
│   │           ├── AndroidManifest.xml
│   │           ├── java
│   │           │   └── com
│   │           │       └── helloworld
│   │           │           ├── MainActivity.java
│   │           │           └── MainApplication.java
│   │           └── res
│   │               ├── mipmap-hdpi
│   │               │   └── ic_launcher.png
│   │               ├── mipmap-mdpi
│   │               │   └── ic_launcher.png
│   │               ├── mipmap-xhdpi
│   │               │   └── ic_launcher.png
│   │               ├── mipmap-xxhdpi
│   │               │   └── ic_launcher.png
│   │               └── values
│   │                   ├── strings.xml
│   │                   └── styles.xml
│   ├── build.gradle
│   ├── gradle
│   │   └── wrapper
│   │       ├── gradle-wrapper.jar
│   │       └── gradle-wrapper.properties
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   │   ├── BUCK
│   │   └── debug.keystore.properties
│   └── settings.gradle
├── app.json
├── index.js
├── ios
│   ├── HelloWorld
│   │   ├── AppDelegate.h
│   │   ├── AppDelegate.m
│   │   ├── Base.lproj
│   │   │   └── LaunchScreen.xib
│   │   ├── Images.xcassets
│   │   │   └── AppIcon.appiconset
│   │   │       └── Contents.json
│   │   ├── Info.plist
│   │   └── main.m
│   ├── HelloWorld-tvOS
│   │   └── Info.plist
│   ├── HelloWorld-tvOSTests
│   │   └── Info.plist
│   ├── HelloWorld.xcodeproj
│   │   ├── project.pbxproj
│   │   ├── project.xcworkspace
│   │   │   ├── contents.xcworkspacedata
│   │   │   └── xcuserdata
│   │   │       └── lindiguang.xcuserdatad
│   │   │           └── UserInterfaceState.xcuserstate
│   │   ├── xcshareddata
│   │   │   └── xcschemes
│   │   │       ├── HelloWorld-tvOS.xcscheme
│   │   │       └── HelloWorld.xcscheme
│   │   └── xcuserdata
│   │       └── lindiguang.xcuserdatad
│   │           └── xcschemes
│   │               └── xcschememanagement.plist
│   └── HelloWorldTests
│       ├── HelloWorldTests.m
│       └── Info.plist
├── node_modules
└── package.json

最后

此前并没有怎么接触过 React Native 框架，此次仅是基于了解框架的目的。如果有 Web 开发经验的话，对这种项目结构应该都比较熟悉。

目前对于 React Native 的原理以及如何集成进已有的项目等等的系列问题都不懂，日后还是需要做些简单的调研吧？

Over

参考

posted @ 2017-11-01 13:25  Mr.LMarty  阅读(133)  评论(0)    收藏  举报