status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update EmbeddedAppIOS.md

This commit is contained in:
DougBanksPersonal 2015-12-16 10:50:40 -08:00 committed by DougBanksPersonal
parent 42a1620b1e
commit 3955bebb74
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/EmbeddedAppIOS.md
View File

@ -15,7 +15,11 @@ Since React makes no assumptions about the rest of your technology stack – it
- [Node.js](http://nodejs.org)
- Install **nvm** with [its setup instructions here](https://github.com/creationix/nvm#installation). Then run `nvm install node && nvm alias default node`, which installs the latest version of Node.js and sets up your terminal so you can run it by typing `node`. With nvm you can install multiple versions of Node.js and easily switch between them.
- If you are using Node 5.0 or newer, we recommend installing npm 2, which is much faster than npm 3. After installing Node, run `npm install -g npm@2`
- Install your copy of React Native under your `node_modules` directory where your JS resides.
- Install the `react-native` package from npm by running the following command in the root directory of your project:
- `npm install react-native`
At this point you should have the React Native package installed under a directory named `node_modules` as a sibling to your `.xcodeproj` file.
## Install React Native Using CocoaPods
@ -26,7 +30,7 @@ When you are ready to work with CocoaPods, add the following lines to `Podfile`.
```ruby
# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => '../node_modules/react-native', :subspecs => [
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
@ -126,7 +130,7 @@ Ready for the most interesting part? Now we shall create the `RCTRootView`, wher
In `ReactView.m`, we need to first initiate `RCTRootView` with the URI of your `index.ios.bundle`. `index.ios.bundle` will be created by packager and served by React Native server, which will be discussed later on.
```
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
@ -152,7 +156,7 @@ rootView.frame = self.bounds;
In root directory, we need to start React Native development server.
```
(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)
(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)
```
This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The `--root` option indicates the root of your React Native apps – this will be our `ReactComponents` directory containing the single `index.ios.js` file. This running server will package up the `index.ios.bundle` file accessible via `http://localhost:8081/index.ios.bundle`.
@ -163,7 +167,7 @@ Now compile and run your app. You shall now see your React Native app running in
![Example](/react-native/img/EmbeddedAppExample.png)
Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C `UIView` subclass.
Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -> Preprocessor Macros). You've got a simple React component totally encapsulated behind an Objective-C `UIView` subclass.
## Conclusion