Update EmbededApp.md

Use ``` instead of indentation for code blocks
This commit is contained in:
John Wu 2015-03-31 23:01:14 +08:00
parent 9c8fdafecc
commit b873fd6e31

View File

@ -13,42 +13,60 @@ next: activityindicatorios
When you are ready to work with Cocoapods, add the following line to `Podfile`. If you don't have one, then create it under the root directory of your project. When you are ready to work with Cocoapods, add the following line to `Podfile`. If you don't have one, then create it under the root directory of your project.
pod 'React' ```
pod 'React/RCTText' pod 'React'
# Add any subspecs you want to use in your project pod 'React/RCTText'
# Add any subspecs you want to use in your project
```
Remember to install all subspecs you need. The `<Text>` element cannot be used without `pod 'React/RCTText'`. Remember to install all subspecs you need. The `<Text>` element cannot be used without `pod 'React/RCTText'`.
Then install pods via shell Then install pods via shell
$ pod install --verbose ```
$ pod install --verbose
```
The installation process also requires [Node.js](http://nodejs.org). The installation process also requires [Node.js](http://nodejs.org).
## Create Your React Native App ## Create Your React Native App
First, enter React Native's pod root directory and create **index.ios.js** inside a directory `ReactComponent`. First, enter React Native's pod root directory and create **index.ios.js** inside a directory `ReactComponent`.
$ cd Pods/React ```
$ mkdir ReactComponent $ cd Pods/React
$ touch index.ios.js $ mkdir ReactComponent
$ touch index.ios.js
```
Copy & paste following starter code for **index.ios.js**. Copy & paste following starter code for **index.ios.js**.
var React = require('react-native'); ```
var React = require('react-native');
var { var {
Text Text,
} = React; View
} = React;
class SimpleApp extends React.Component {
render() { var styles = React.StyleSheet.create({
return <Text>This is a simple application.</Text> container: {
} flex: 1,
} backgroundColor: 'red'
}
AppRegistry.registerComponent('SimpleApp', () => SimpleApp); });
class SimpleApp extends React.Component {
render() {
return <View style={styles.container}>
<Text>This is a simple application.</Text>
</View>;
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
```
`SimpleApp` will be your **module name**, which will be used later on. `SimpleApp` will be your **module name**, which will be used later on.
## Add Container View To Your App ## Add Container View To Your App
@ -59,21 +77,24 @@ You should now add container view for React Native component. It can be any **UI
However, let's subclass **UIView** for the sake of clean code. Let's name it **ReactView**. Open up **Yourproject.xcworkspace** and create a new class **ReactView** (You can name it whatever you like :)). However, let's subclass **UIView** for the sake of clean code. Let's name it **ReactView**. Open up **Yourproject.xcworkspace** and create a new class **ReactView** (You can name it whatever you like :)).
// ReactView.h ```
// ReactView.h
#import <UIKit/UIKit.h>
@interface ReactView : UIView
@end
#import <UIKit/UIKit.h>
@interface ReactView : UIView
@end
```
Don't forget to add an outlet for it. Don't forget to add an outlet for it.
// ViewController.m ```
// ViewController.m
@interface ViewController () @interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView; @property (weak, nonatomic) IBOutlet ReactView *reactView;
@end @end
```
Here I disabled **AutoLayout** for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself. Here I disabled **AutoLayout** for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.
## Add RCTRootView To Container View ## Add RCTRootView To Container View
@ -82,22 +103,29 @@ Ready for the most interesting part? Now we shall create the **RCTRootView**, wh
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. 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.
NSString *urlString = @"http://localhost:8081/index.ios.bundle"; ```
NSURL *jsCodeLocation = [NSURL URLWithString:urlString]; NSString *urlString = @"http://localhost:8081/index.ios.bundle";
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation NSURL *jsCodeLocation = [NSURL URLWithString:urlString];
moduleName: @"SimpleApp" RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
launchOptions:nil]; moduleName: @"SimpleApp"
launchOptions:nil];
```
Then add it as a subview of the **ReactView**. Then add it as a subview of the **ReactView**.
[self addSubview:rootView]; ```
rootView.frame = self.bounds; [self addSubview:rootView];
rootView.frame = self.bounds;
```
## Start Development Server ## Start Development Server
In root directory, we need to start React Native development server. In root directory, we need to start React Native development server.
$ ./Pods/React/packager/packager.sh --root ./ReactComponents ```
$ ./Pods/React/packager/packager.sh --root ./ReactComponents
```
`--root` indicates the root of your React Native apps. Here we just have one **index.ios.js**. React Native development server will use packager to create a **index.ios.bundle**. Which can be access via `http://localhost:8081/index.ios.bundle`. `--root` indicates the root of your React Native apps. Here we just have one **index.ios.js**. React Native development server will use packager to create a **index.ios.bundle**. Which can be access via `http://localhost:8081/index.ios.bundle`.
## Compile And Run ## Compile And Run