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:
@@ -173,7 +173,7 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// Module name
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'RNHighScores'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> RNHighScores<span class="token punctuation">)</span><span class="token punctuation">;</span></div><blockquote><p><code>RNHighScores</code> is the name of your module that will be used when you add a view to React Native from within your iOS application.</p></blockquote><h2><a class="anchor" name="the-magic-rctrootview"></a>The Magic: <code>RCTRootView</code> <a class="hash-link" href="docs/integration-with-existing-apps.html#the-magic-rctrootview">#</a></h2><p>Now that your React Native component is created via <code>index.ios.js</code>, you need to add that component to a new or existing <code>ViewController</code>. The easiest path is to take is to optionally create an event path to your component and then add that component to an existing <code>ViewController</code>.</p><p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p><h3><a class="anchor" name="create-an-event-path"></a>Create an Event Path <a class="hash-link" href="docs/integration-with-existing-apps.html#create-an-event-path">#</a></h3><p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p><p><img src="img/react-native-add-react-native-integration-link.png" alt="Event Path"></p><h4><a class="anchor" name="event-handler"></a>Event Handler <a class="hash-link" href="docs/integration-with-existing-apps.html#event-handler">#</a></h4><p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p><p>When you build a React Native application, you use the React Native packager to create an <code>index.ios.bundle</code> that will be served by the React Native server. Inside <code>index.ios.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.ios.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p><p>We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the <code>index.ios.bundle</code>. Finally, we will create the main <code>RCTRootView</code>. Notice how we provide <code>RNHighScores</code> as the <code>moduleName</code> that we created <a href="#the-react-native-component" target="">above</a> when writing the code for our React Native component.</p><span><block class="objc" />
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'RNHighScores'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> RNHighScores<span class="token punctuation">)</span><span class="token punctuation">;</span></div><blockquote><p><code>RNHighScores</code> is the name of your module that will be used when you add a view to React Native from within your iOS application.</p></blockquote><h2><a class="anchor" name="the-magic-rctrootview"></a>The Magic: <code>RCTRootView</code> <a class="hash-link" href="docs/integration-with-existing-apps.html#the-magic-rctrootview">#</a></h2><p>Now that your React Native component is created via <code>index.ios.js</code>, you need to add that component to a new or existing <code>ViewController</code>. The easiest path to take is to optionally create an event path to your component and then add that component to an existing <code>ViewController</code>.</p><p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p><h3><a class="anchor" name="create-an-event-path"></a>Create an Event Path <a class="hash-link" href="docs/integration-with-existing-apps.html#create-an-event-path">#</a></h3><p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p><p><img src="img/react-native-add-react-native-integration-link.png" alt="Event Path"></p><h4><a class="anchor" name="event-handler"></a>Event Handler <a class="hash-link" href="docs/integration-with-existing-apps.html#event-handler">#</a></h4><p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p><p>When you build a React Native application, you use the React Native packager to create an <code>index.ios.bundle</code> that will be served by the React Native server. Inside <code>index.ios.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.ios.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p><p>We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the <code>index.ios.bundle</code>. Finally, we will create the main <code>RCTRootView</code>. Notice how we provide <code>RNHighScores</code> as the <code>moduleName</code> that we created <a href="#the-react-native-component" target="">above</a> when writing the code for our React Native component.</p><span><block class="objc" />
|
||||
|
||||
</span><p>First <code>import</code> the <code>RCTRootView</code> library.</p><div class="prism language-javascript">#import <span class="token string">"RCTRootView.h"</span></div><blockquote><p>The <code>initialProperties</code> are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use <code>this.props</code> to get access to that data.</p></blockquote><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>IBAction<span class="token punctuation">)</span>highScoreButtonPressed<span class="token punctuation">:</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>sender <span class="token punctuation">{</span>
|
||||
<span class="token function">NSLog<span class="token punctuation">(</span></span>@<span class="token string">"High Score Button Pressed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
Reference in New Issue
Block a user