mirror of
https://github.com/status-im/react-native.git
synced 2025-02-10 16:36:25 +00:00
Update EmbededApp.md
Use ``` instead of indentation for code blocks
This commit is contained in:
parent
9c8fdafecc
commit
b873fd6e31
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user