mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -40,7 +40,7 @@ React<span class="token punctuation">.</span>AppRegistry<span class="token punct
|
||||
</span>
|
||||
@interface <span class="token class-name">ViewController</span> <span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
@property <span class="token punctuation">(</span>weak<span class="token punctuation">,</span> nonatomic<span class="token punctuation">)</span> IBOutlet ReactView <span class="token operator">*</span>reactView<span class="token punctuation">;</span>
|
||||
@end</div><p>Here I disabled <strong>AutoLayout</strong> for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.</p><h2><a class="anchor" name="add-rctrootview-to-container-view"></a>Add RCTRootView To Container View <a class="hash-link" href="docs/embedded-app-ios.html#add-rctrootview-to-container-view">#</a></h2><p>Ready for the most interesting part? Now we shall create the <code>RCTRootView</code>, where your React Native app lives.</p><p>In <code>ReactView.m</code>, we need to first initiate <code>RCTRootView</code> with the URI of your <code>index.ios.bundle</code>. <code>index.ios.bundle</code> will be created by packager and served by React Native server, which will be discussed later on.</p><div class="prism language-javascript">NSURL <span class="token operator">*</span>jsCodeLocation <span class="token operator">=</span> <span class="token punctuation">[</span>NSURL URLWithString<span class="token punctuation">:</span>@<span class="token string">"http://localhost:8081/index.ios.bundle?platform=ios"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
@end</div><p><strong>NOTE</strong> For Swift apps there is no need for that.</p><p>Here I disabled <strong>AutoLayout</strong> for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.</p><h2><a class="anchor" name="add-rctrootview-to-container-view"></a>Add RCTRootView To Container View <a class="hash-link" href="docs/embedded-app-ios.html#add-rctrootview-to-container-view">#</a></h2><p>Ready for the most interesting part? Now we shall create the <code>RCTRootView</code>, where your React Native app lives.</p><p>In <code>ReactView.m</code>, we need to first initiate <code>RCTRootView</code> with the URI of your <code>index.ios.bundle</code>. <code>index.ios.bundle</code> will be created by packager and served by React Native server, which will be discussed later on.</p><div class="prism language-javascript">NSURL <span class="token operator">*</span>jsCodeLocation <span class="token operator">=</span> <span class="token punctuation">[</span>NSURL URLWithString<span class="token punctuation">:</span>@<span class="token string">"http://localhost:8081/index.ios.bundle?platform=ios"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
|
||||
</span><span class="token comment" spellcheck="true">//
|
||||
</span><span class="token comment" spellcheck="true">// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
|
||||
@@ -52,7 +52,25 @@ React<span class="token punctuation">.</span>AppRegistry<span class="token punct
|
||||
moduleName<span class="token punctuation">:</span> @<span class="token string">"SimpleApp"</span>
|
||||
initialProperties<span class="token punctuation">:</span>nil
|
||||
launchOptions<span class="token punctuation">:</span>nil<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Then add it as a subview of the <code>ReactView</code>.</p><div class="prism language-javascript"><span class="token punctuation">[</span>self addSubview<span class="token punctuation">:</span>rootView<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> self<span class="token punctuation">.</span>bounds<span class="token punctuation">;</span></div><h2><a class="anchor" name="start-development-server"></a>Start Development Server <a class="hash-link" href="docs/embedded-app-ios.html#start-development-server">#</a></h2><p>In root directory, we need to start React Native development server.</p><div class="prism language-javascript"><span class="token punctuation">(</span>JS_DIR<span class="token operator">=</span>`pwd`<span class="token operator">/</span>ReactComponent<span class="token punctuation">;</span> cd node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token punctuation">;</span> npm run start <span class="token operator">--</span> <span class="token operator">--</span>root $JS_DIR<span class="token punctuation">)</span></div><p>This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The <code>--root</code> option indicates the root of your React Native apps – this will be our <code>ReactComponents</code> directory containing the single <code>index.ios.js</code> file. This running server will package up the <code>index.ios.bundle</code> file accessible via <code>http://localhost:8081/index.ios.bundle</code>.</p><h2><a class="anchor" name="update-app-transport-security"></a>Update App Transport Security <a class="hash-link" href="docs/embedded-app-ios.html#update-app-transport-security">#</a></h2><p>On iOS 9 and above the app won't be a able to connect over http to localhost unless specifically told so. See this thread for alternatives and instructions: <a href="http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http">http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http</a>.</p><p>It is recommended that you add an App Transport Security exception for <code>localhost</code> in your app's <code>Info.plist</code> file:</p><div class="prism language-javascript"><key<span class="token operator">></span>NSAppTransportSecurity<<span class="token operator">/</span>key<span class="token operator">></span>
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> self<span class="token punctuation">.</span>bounds<span class="token punctuation">;</span></div><h3><a class="anchor" name="swift-apps"></a>Swift apps <a class="hash-link" href="docs/embedded-app-ios.html#swift-apps">#</a></h3><p>Add the following to ReactView.swift file:</p><div class="prism language-javascript">import UIKit
|
||||
import React
|
||||
|
||||
class <span class="token class-name">ReactView</span><span class="token punctuation">:</span> UIView <span class="token punctuation">{</span>
|
||||
|
||||
<span class="token keyword">let</span> rootView<span class="token punctuation">:</span> RCTRootView <span class="token operator">=</span> <span class="token function">RCTRootView<span class="token punctuation">(</span></span>bundleURL<span class="token punctuation">:</span> <span class="token function">NSURL<span class="token punctuation">(</span></span>string<span class="token punctuation">:</span> <span class="token string">"http://localhost:8081/index.ios.bundle?platform=ios"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
moduleName<span class="token punctuation">:</span> <span class="token string">"SimpleApp"</span><span class="token punctuation">,</span> initialProperties<span class="token punctuation">:</span> nil<span class="token punctuation">,</span> launchOptions<span class="token punctuation">:</span> nil<span class="token punctuation">)</span>
|
||||
|
||||
override func <span class="token function">layoutSubviews<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
super<span class="token punctuation">.</span><span class="token function">layoutSubviews<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
|
||||
<span class="token function">loadReact<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
func loadReact <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">addSubview<span class="token punctuation">(</span></span>rootView<span class="token punctuation">)</span>
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> self<span class="token punctuation">.</span>bounds
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><p>And then make sure your view is added in a ViewContainer or story board file.</p><h2><a class="anchor" name="start-development-server"></a>Start Development Server <a class="hash-link" href="docs/embedded-app-ios.html#start-development-server">#</a></h2><p>In root directory, we need to start React Native development server.</p><div class="prism language-javascript"><span class="token punctuation">(</span>JS_DIR<span class="token operator">=</span>`pwd`<span class="token operator">/</span>ReactComponent<span class="token punctuation">;</span> cd node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token punctuation">;</span> npm run start <span class="token operator">--</span> <span class="token operator">--</span>root $JS_DIR<span class="token punctuation">)</span></div><p>This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The <code>--root</code> option indicates the root of your React Native apps – this will be our <code>ReactComponents</code> directory containing the single <code>index.ios.js</code> file. This running server will package up the <code>index.ios.bundle</code> file accessible via <code>http://localhost:8081/index.ios.bundle</code>.</p><h2><a class="anchor" name="update-app-transport-security"></a>Update App Transport Security <a class="hash-link" href="docs/embedded-app-ios.html#update-app-transport-security">#</a></h2><p>On iOS 9 and above the app won't be a able to connect over http to localhost unless specifically told so. See this thread for alternatives and instructions: <a href="http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http">http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http</a>.</p><p>It is recommended that you add an App Transport Security exception for <code>localhost</code> in your app's <code>Info.plist</code> file:</p><div class="prism language-javascript"><key<span class="token operator">></span>NSAppTransportSecurity<<span class="token operator">/</span>key<span class="token operator">></span>
|
||||
<dict<span class="token operator">></span>
|
||||
<key<span class="token operator">></span>NSExceptionDomains<<span class="token operator">/</span>key<span class="token operator">></span>
|
||||
<dict<span class="token operator">></span>
|
||||
|
||||
Reference in New Issue
Block a user