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
@@ -70,7 +70,7 @@ class <span class="token class-name">ReactView</span><span class="token punctuat
|
||||
<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>
|
||||
<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>ReactComponent</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>
|
||||
@@ -80,7 +80,7 @@ class <span class="token class-name">ReactView</span><span class="token punctuat
|
||||
<<span class="token boolean">true</span><span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span></div><p>If you don't do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="docs/embedded-app-ios.html#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>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 <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="docs/embedded-app-ios.html#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/tjwudi/EmbededReactNativeExample" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span></div><p>If you don't do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="docs/embedded-app-ios.html#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>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 <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="docs/embedded-app-ios.html#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/hfossli/ReactNativeIntegration" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
Reference in New Issue
Block a user