You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/EmbededApp.md
+74-46Lines changed: 74 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,42 +13,60 @@ next: activityindicatorios
13
13
14
14
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.
15
15
16
-
pod 'React'
17
-
pod 'React/RCTText'
18
-
# Add any subspecs you want to use in your project
16
+
```
17
+
pod 'React'
18
+
pod 'React/RCTText'
19
+
# Add any subspecs you want to use in your project
20
+
```
19
21
20
22
Remember to install all subspecs you need. The `<Text>` element cannot be used without `pod 'React/RCTText'`.
21
-
23
+
22
24
Then install pods via shell
23
25
24
-
$ pod install --verbose
25
-
26
+
```
27
+
$ pod install --verbose
28
+
```
29
+
26
30
The installation process also requires [Node.js](http://nodejs.org).
27
31
28
32
## Create Your React Native App
29
33
30
34
First, enter React Native's pod root directory and create **index.ios.js** inside a directory `ReactComponent`.
31
35
32
-
$ cd Pods/React
33
-
$ mkdir ReactComponent
34
-
$ touch index.ios.js
35
-
36
+
```
37
+
$ cd Pods/React
38
+
$ mkdir ReactComponent
39
+
$ touch index.ios.js
40
+
```
41
+
36
42
Copy & paste following starter code for **index.ios.js**.
`SimpleApp` will be your **module name**, which will be used later on.
53
71
54
72
## 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
59
77
60
78
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 :)).
Here I disabled **AutoLayout** for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.
78
99
79
100
## Add RCTRootView To Container View
@@ -82,22 +103,29 @@ Ready for the most interesting part? Now we shall create the **RCTRootView**, wh
82
103
83
104
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.
`--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`.
0 commit comments