mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
Travis CI
@@ -53,7 +53,17 @@ 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="#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="compile-and-run"></a>Compile And Run <a class="hash-link" href="#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="/react-native/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="#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="communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
|
||||
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="#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="#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>
|
||||
<key<span class="token operator">></span>localhost<<span class="token operator">/</span>key<span class="token operator">></span>
|
||||
<dict<span class="token operator">></span>
|
||||
<key<span class="token operator">></span>NSTemporaryExceptionAllowsInsecureHTTPLoads<<span class="token operator">/</span>key<span class="token operator">></span>
|
||||
<<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="#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="/react-native/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="#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="communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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