This tool doesn't work on Windows (yet).
Node and Watchman Installation
Developing with react-native on OSX requires the installation of node and watchman. Please read the official docs for details.
Project Creation
To create a new project named MyProject,
shell@proj-root/create_project_by_name> init MyProjectAfter the downloading is finished, go to the $HOME/MyProject directory and run npm install to install dependencies.
iOS
shell@$HOME/MyProject> react-native run-iosor
shell@$HOME/MyProject> open ./ios/ReactNativeStarterPackage.xcodeprojPlease note that Info.plist -> App Transport Security Settings -> Allow Arbitrary Loads of $HOME/MyProject/ios does NOT modify the default ATS settings thus you might have to change it manually according to specific demands.
Android (need $ANDROID_HOME/tools added to $PATH)
shell> android avd
...(launch an Android emulator)...
shell@$HOME/MyProject> ./run_android_with_localhost_proxying
Please refer to the official document or my 印象笔记 record (access permission needed) for information about react-native setup of Android development.
If difficulty of debugging by real Android device is encountered, please refer to the official document for troubleshooting steps. Some people might get stuck at the step of configuring the Debug server host for device.
Gradle Settings
After the project, e.g. MyProject is created at $HOME/MyProject, the default build tool for its Android sub-project is gradle which will be invoked by a wrapper script at $HOME/MyProject/android/gradlew[.bat]. Read gradle's official introduction for details.
By
shell@$HOME/MyProject> ./run_android_with_localhost_proxying
one actually calls
shell@$HOME/MyProject> react-native run-android
which in turn calls $HOME/MyProject/android/gradlew[.bat] to build the Android sub-project. The distribution of gradle to use is then determined by the config file at $HOME/MyProject/android/gradle/wrapper/gradle-wrapper.properties which reads like the following.
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
According to gradle's official docs, one could simply update distributionUrl to
distributionUrl=gradle-2.14.1-all.zip
to use a local distribution $HOME/MyProject/android/gradle/wrapper/gradle-2.14.1-all.zip instead of downloading from the original https\://services.gradle.org/distributions/gradle-2.14.1-all.zip.
Web
shell@$HOME/MyProject/web> npm install
shell@$HOME/MyProject/web> npm run build
shell@$HOME/MyProject> node api_daemon.js
or
shell@$HOME/MyProject/web> npm install
shell@$HOME/MyProject/web> npm run build-watch
shell@$HOME/MyProject> node api_daemon.js
to enable webpack watcher for file updates.
Visit port 9090 on the serving machine after daemon started.
Please refer to ExpressAndReactDemo for more information about web specific configurations.
Reminders
Use
shell@$HOME/MyProject> ./node_modules/react-native/packager/packager.sh start --resetCache
to start the packager with cache cleaned if any weird errors show up and you're sure that it's a cache relevant problem.
Websocket (or WebSocket, but I prefer Websocket for typing convenience)
The express-ws is currently chosen as websocket server library for this repository. The client sides are using websocket APIs wrapped by React-Native.
The popular library socket.io is an option as well.
Navigating/Routing
The react-native Navigator is not yet supported by react-native-web.
The navigating/routing integration used here is react-native Navigator for iOS/Android and react-router for web.
It's also possible to use react-router-native alone instead.