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
@@ -224,11 +224,11 @@ react<span class="token operator">-</span>native run<span class="token operator"
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><span><block class="native mac ios" />
|
||||
|
||||
</span><ul><li>Open <code>index.ios.js</code> in your text editor of choice and edit some lines.</li><li>Hit <code>⌘R</code> in your iOS Simulator to reload the app and see your changes!</li></ul><span><block class="native mac android" />
|
||||
</span><ul><li>Open <code>index.js</code> in your text editor of choice and edit some lines.</li><li>Hit <code>⌘R</code> in your iOS Simulator to reload the app and see your changes!</li></ul><span><block class="native mac android" />
|
||||
|
||||
</span><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native windows linux android" />
|
||||
</span><ul><li>Open <code>index.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native windows linux android" />
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native mac ios android" />
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><ul><li>Open <code>index.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native mac ios android" />
|
||||
|
||||
</span><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified your first React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
|
||||
@@ -163,7 +163,7 @@ Pod installation complete<span class="token operator">!</span> There are <span c
|
||||
|
||||
</span><blockquote><p>If you get a warning such as "<em>The <code>swift-2048 [Debug]</code> target overrides the <code>FRAMEWORK_SEARCH_PATHS</code> build setting defined in <code>Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig</code>. This can lead to problems with the CocoaPods installation</em>", then make sure the <code>Framework Search Paths</code> in <code>Build Settings</code> for both <code>Debug</code> and <code>Release</code> only contain <code>$(inherited)</code>.</p></blockquote><span><block class="objc swift" />
|
||||
|
||||
</span><h3><a class="anchor" name="code-integration"></a>Code integration <a class="hash-link" href="docs/integration-with-existing-apps.html#code-integration">#</a></h3><p>Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.</p><h4><a class="anchor" name="the-react-native-component"></a>The React Native component <a class="hash-link" href="docs/integration-with-existing-apps.html#the-react-native-component">#</a></h4><p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p><h5><a class="anchor" name="1-create-a-index-ios-js-file"></a>1. Create a <code>index.ios.js</code> file <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-a-index-ios-js-file">#</a></h5><p>First, create an empty <code>index.ios.js</code> file in the root of your React Native project.</p><p><code>index.ios.js</code> is the starting point for React Native applications on iOS, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.ios.js</code>.</p><h5><a class="anchor" name="2-add-your-react-native-code"></a>2. Add your React Native code <a class="hash-link" href="docs/integration-with-existing-apps.html#2-add-your-react-native-code">#</a></h5><p>In your <code>index.ios.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code></p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
</span><h3><a class="anchor" name="code-integration"></a>Code integration <a class="hash-link" href="docs/integration-with-existing-apps.html#code-integration">#</a></h3><p>Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.</p><h4><a class="anchor" name="the-react-native-component"></a>The React Native component <a class="hash-link" href="docs/integration-with-existing-apps.html#the-react-native-component">#</a></h4><p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p><h5><a class="anchor" name="1-create-a-index-js-file"></a>1. Create a <code>index.js</code> file <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-a-index-js-file">#</a></h5><p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p><p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p><h5><a class="anchor" name="2-add-your-react-native-code"></a>2. Add your React Native code <a class="hash-link" href="docs/integration-with-existing-apps.html#2-add-your-react-native-code">#</a></h5><p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code></p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
@@ -211,11 +211,11 @@ Pod installation complete<span class="token operator">!</span> There are <span c
|
||||
<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><span class="token punctuation">(</span><span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</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><h4><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></h4><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><h5><a class="anchor" name="1-create-an-event-path"></a>1. Create an Event Path <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-an-event-path">#</a></h5><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><h5><a class="anchor" name="2-event-handler"></a>2. Event Handler <a class="hash-link" href="docs/integration-with-existing-apps.html#2-event-handler">#</a></h5><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><span class="token punctuation">(</span><span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</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><h4><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></h4><p>Now that your React Native component is created via <code>index.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><h5><a class="anchor" name="1-create-an-event-path"></a>1. Create an Event Path <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-an-event-path">#</a></h5><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><h5><a class="anchor" name="2-event-handler"></a>2. Event Handler <a class="hash-link" href="docs/integration-with-existing-apps.html#2-event-handler">#</a></h5><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.bundle</code> that will be served by the React Native server. Inside <code>index.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.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.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> header.</p><div class="prism language-objectivec"><span class="token macro">#<span class="token directive">import</span> <React/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-objectivec"><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>
|
||||
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>
|
||||
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.bundle?platform=ios"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
RCTRootView <span class="token operator">*</span>rootView <span class="token operator">=</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">[</span>RCTRootView alloc<span class="token punctuation">]</span> initWithBundleURL<span class="token punctuation">:</span> jsCodeLocation
|
||||
@@ -241,7 +241,7 @@ Pod installation complete<span class="token operator">!</span> There are <span c
|
||||
|
||||
</span><p>First <code>import</code> the <code>React</code> library.</p><div class="prism language-javascript"><span class="token keyword">import</span> React</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-swift"><span class="token atrule">@IBAction</span> <span class="token keyword">func</span> <span class="token function">highScoreButtonTapped<span class="token punctuation">(</span></span>sender <span class="token punctuation">:</span> <span class="token builtin">UIButton</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">NSLog<span class="token punctuation">(</span></span><span class="token string">"Hello"</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">let</span> jsCodeLocation <span class="token operator">=</span> <span class="token function">URL<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 keyword">let</span> jsCodeLocation <span class="token operator">=</span> <span class="token function">URL<span class="token punctuation">(</span></span>string<span class="token punctuation">:</span> <span class="token string">"http://localhost:8081/index.bundle?platform=ios"</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">let</span> mockData<span class="token punctuation">:</span><span class="token builtin">NSDictionary</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"scores"</span><span class="token punctuation">:</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">:</span><span class="token string">"Alex"</span><span class="token punctuation">,</span> <span class="token string">"value"</span><span class="token punctuation">:</span><span class="token string">"42"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
@@ -264,7 +264,7 @@ Pod installation complete<span class="token operator">!</span> There are <span c
|
||||
|
||||
</span><blockquote><p>When moving your app to production, the <code>NSURL</code> can point to a pre-bundled file on disk via something like <code>let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")</code>. You can use the <code>react-native-xcode.sh</code> script in <code>node_modules/react-native/scripts/</code> to generate that pre-bundled file.</p></blockquote><span><block class="objc swift" />
|
||||
|
||||
</span><h5><a class="anchor" name="3-wire-up"></a>3. Wire Up <a class="hash-link" href="docs/integration-with-existing-apps.html#3-wire-up">#</a></h5><p>Wire up the new link in the main menu to the newly added event handler method.</p><p><img src="img/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p><blockquote><p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p></blockquote><h3><a class="anchor" name="test-your-integration"></a>Test your integration <a class="hash-link" href="docs/integration-with-existing-apps.html#test-your-integration">#</a></h3><p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.ios.bundle</code> package and the server running on <code>localhost</code> to serve it.</p><h5><a class="anchor" name="1-add-app-transport-security-exception"></a>1. Add App Transport Security exception <a class="hash-link" href="docs/integration-with-existing-apps.html#1-add-app-transport-security-exception">#</a></h5><p>Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's <code>Info.plist</code> (or equivalent) file.</p><div class="prism language-xml"><key>NSAppTransportSecurity</key>
|
||||
</span><h5><a class="anchor" name="3-wire-up"></a>3. Wire Up <a class="hash-link" href="docs/integration-with-existing-apps.html#3-wire-up">#</a></h5><p>Wire up the new link in the main menu to the newly added event handler method.</p><p><img src="img/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p><blockquote><p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p></blockquote><h3><a class="anchor" name="test-your-integration"></a>Test your integration <a class="hash-link" href="docs/integration-with-existing-apps.html#test-your-integration">#</a></h3><p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on <code>localhost</code> to serve it.</p><h5><a class="anchor" name="1-add-app-transport-security-exception"></a>1. Add App Transport Security exception <a class="hash-link" href="docs/integration-with-existing-apps.html#1-add-app-transport-security-exception">#</a></h5><p>Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's <code>Info.plist</code> (or equivalent) file.</p><div class="prism language-xml"><key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSExceptionDomains</key>
|
||||
<dict>
|
||||
@@ -293,7 +293,7 @@ $ react<span class="token operator">-</span>native run<span class="token operato
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span></div><blockquote><p>Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.</p></blockquote><h3><a class="anchor" name="configuring-permissions"></a>Configuring permissions <a class="hash-link" href="docs/integration-with-existing-apps.html#configuring-permissions">#</a></h3><p>Next, make sure you have the Internet permission in your <code>AndroidManifest.xml</code>:</p><div class="prism language-javascript"><span class="token operator"><</span>uses<span class="token operator">-</span>permission android<span class="token punctuation">:</span>name<span class="token operator">=</span><span class="token string">"android.permission.INTERNET"</span> <span class="token operator">/</span><span class="token operator">></span></div><p>If you need to access to the <code>DevSettingsActivity</code> add to your <code>AndroidManifest.xml</code>:</p><div class="prism language-javascript"><span class="token operator"><</span>activity android<span class="token punctuation">:</span>name<span class="token operator">=</span><span class="token string">"com.facebook.react.devsupport.DevSettingsActivity"</span> <span class="token operator">/</span><span class="token operator">></span></div><p>This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.</p><h3><a class="anchor" name="code-integration"></a>Code integration <a class="hash-link" href="docs/integration-with-existing-apps.html#code-integration">#</a></h3><p>Now we will actually modify the native Android application to integrate React Native.</p><h4><a class="anchor" name="the-react-native-component"></a>The React Native component <a class="hash-link" href="docs/integration-with-existing-apps.html#the-react-native-component">#</a></h4><p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p><h5><a class="anchor" name="1-create-a-index-android-js-file"></a>1. Create a <code>index.android.js</code> file <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-a-index-android-js-file">#</a></h5><p>First, create an empty <code>index.android.js</code> file in the root of your React Native project.</p><p><code>index.android.js</code> is the starting point for React Native applications on Android, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.android.js</code>.</p><h5><a class="anchor" name="2-add-your-react-native-code"></a>2. Add your React Native code <a class="hash-link" href="docs/integration-with-existing-apps.html#2-add-your-react-native-code">#</a></h5><p>In your <code>index.android.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code>:</p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><blockquote><p>Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.</p></blockquote><h3><a class="anchor" name="configuring-permissions"></a>Configuring permissions <a class="hash-link" href="docs/integration-with-existing-apps.html#configuring-permissions">#</a></h3><p>Next, make sure you have the Internet permission in your <code>AndroidManifest.xml</code>:</p><div class="prism language-javascript"><span class="token operator"><</span>uses<span class="token operator">-</span>permission android<span class="token punctuation">:</span>name<span class="token operator">=</span><span class="token string">"android.permission.INTERNET"</span> <span class="token operator">/</span><span class="token operator">></span></div><p>If you need to access to the <code>DevSettingsActivity</code> add to your <code>AndroidManifest.xml</code>:</p><div class="prism language-javascript"><span class="token operator"><</span>activity android<span class="token punctuation">:</span>name<span class="token operator">=</span><span class="token string">"com.facebook.react.devsupport.DevSettingsActivity"</span> <span class="token operator">/</span><span class="token operator">></span></div><p>This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.</p><h3><a class="anchor" name="code-integration"></a>Code integration <a class="hash-link" href="docs/integration-with-existing-apps.html#code-integration">#</a></h3><p>Now we will actually modify the native Android application to integrate React Native.</p><h4><a class="anchor" name="the-react-native-component"></a>The React Native component <a class="hash-link" href="docs/integration-with-existing-apps.html#the-react-native-component">#</a></h4><p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p><h5><a class="anchor" name="1-create-a-index-js-file"></a>1. Create a <code>index.js</code> file <a class="hash-link" href="docs/integration-with-existing-apps.html#1-create-a-index-js-file">#</a></h5><p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p><p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p><h5><a class="anchor" name="2-add-your-react-native-code"></a>2. Add your React Native code <a class="hash-link" href="docs/integration-with-existing-apps.html#2-add-your-react-native-code">#</a></h5><p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code>:</p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
@@ -351,7 +351,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
mReactInstanceManager <span class="token operator">=</span> ReactInstanceManager<span class="token punctuation">.</span><span class="token function">builder<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setApplication<span class="token punctuation">(</span></span><span class="token function">getApplication<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setBundleAssetName<span class="token punctuation">(</span></span><span class="token string">"index.android.bundle"</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setJSMainModuleName<span class="token punctuation">(</span></span><span class="token string">"index.android"</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setJSMainModuleName<span class="token punctuation">(</span></span><span class="token string">"index"</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">addPackage<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">MainReactPackage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setUseDeveloperSupport<span class="token punctuation">(</span></span>BuildConfig<span class="token punctuation">.</span>DEBUG<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">setInitialLifecycleState<span class="token punctuation">(</span></span>LifecycleState<span class="token punctuation">.</span>RESUMED<span class="token punctuation">)</span>
|
||||
@@ -365,7 +365,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">invokeDefaultOnBackPressed<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onBackPressed<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><blockquote><p>If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.android.js file (it’s the first argument to the <code>AppRegistry.registerComponent()</code> method).</p></blockquote><p>If you are using Android Studio, use <code>Alt + Enter</code> to add all missing imports in your MyReactActivity class. Be careful to use your package’s <code>BuildConfig</code> and not the one from the <code>...facebook...</code> package.</p><p>We need set the theme of <code>MyReactActivity</code> to <code>Theme.AppCompat.Light.NoActionBar</code> because some components rely on this theme.</p><div class="prism language-xml"><activity
|
||||
<span class="token punctuation">}</span></div><blockquote><p>If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.js file (it’s the first argument to the <code>AppRegistry.registerComponent()</code> method).</p></blockquote><p>If you are using Android Studio, use <code>Alt + Enter</code> to add all missing imports in your MyReactActivity class. Be careful to use your package’s <code>BuildConfig</code> and not the one from the <code>...facebook...</code> package.</p><p>We need set the theme of <code>MyReactActivity</code> to <code>Theme.AppCompat.Light.NoActionBar</code> because some components rely on this theme.</p><div class="prism language-xml"><activity
|
||||
android:name=".MyReactActivity"
|
||||
android:label="@string/app_name"
|
||||
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
|
||||
@@ -408,7 +408,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onKeyUp<span class="token punctuation">(</span></span>keyCode<span class="token punctuation">,</span> event<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>Now your activity is ready to run some JavaScript code.</p><h3><a class="anchor" name="test-your-integration"></a>Test your integration <a class="hash-link" href="docs/integration-with-existing-apps.html#test-your-integration">#</a></h3><p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.android.bundle</code> package and the server running on localhost to serve it.</p><h5><a class="anchor" name="1-run-the-packager"></a>1. Run the packager <a class="hash-link" href="docs/integration-with-existing-apps.html#1-run-the-packager">#</a></h5><p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p><div class="prism language-javascript">$ npm start</div><h5><a class="anchor" name="2-run-the-app"></a>2. Run the app <a class="hash-link" href="docs/integration-with-existing-apps.html#2-run-the-app">#</a></h5><p>Now build and run your Android app as normal.</p><p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h3><a class="anchor" name="creating-a-release-build-in-android-studio"></a>Creating a release build in Android Studio <a class="hash-link" href="docs/integration-with-existing-apps.html#creating-a-release-build-in-android-studio">#</a></h3><p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native bundle <span class="token operator">--</span>platform android <span class="token operator">--</span>dev <span class="token boolean">false</span> <span class="token operator">--</span>entry<span class="token operator">-</span>file index<span class="token punctuation">.</span>android<span class="token punctuation">.</span>js <span class="token operator">--</span>bundle<span class="token operator">-</span>output android<span class="token operator">/</span>com<span class="token operator">/</span>your<span class="token operator">-</span>company<span class="token operator">-</span>name<span class="token operator">/</span>app<span class="token operator">-</span><span class="token keyword">package</span><span class="token operator">-</span>name<span class="token operator">/</span>src<span class="token operator">/</span>main<span class="token operator">/</span>assets<span class="token operator">/</span>index<span class="token punctuation">.</span>android<span class="token punctuation">.</span>bundle <span class="token operator">--</span>assets<span class="token operator">-</span>dest android<span class="token operator">/</span>com<span class="token operator">/</span>your<span class="token operator">-</span>company<span class="token operator">-</span>name<span class="token operator">/</span>app<span class="token operator">-</span><span class="token keyword">package</span><span class="token operator">-</span>name<span class="token operator">/</span>src<span class="token operator">/</span>main<span class="token regex">/res/</span></div><blockquote><p>Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.</p></blockquote><p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p><span><block class="objc swift android" />
|
||||
<span class="token punctuation">}</span></div><p>Now your activity is ready to run some JavaScript code.</p><h3><a class="anchor" name="test-your-integration"></a>Test your integration <a class="hash-link" href="docs/integration-with-existing-apps.html#test-your-integration">#</a></h3><p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on localhost to serve it.</p><h5><a class="anchor" name="1-run-the-packager"></a>1. Run the packager <a class="hash-link" href="docs/integration-with-existing-apps.html#1-run-the-packager">#</a></h5><p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p><div class="prism language-javascript">$ npm start</div><h5><a class="anchor" name="2-run-the-app"></a>2. Run the app <a class="hash-link" href="docs/integration-with-existing-apps.html#2-run-the-app">#</a></h5><p>Now build and run your Android app as normal.</p><p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h3><a class="anchor" name="creating-a-release-build-in-android-studio"></a>Creating a release build in Android Studio <a class="hash-link" href="docs/integration-with-existing-apps.html#creating-a-release-build-in-android-studio">#</a></h3><p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native bundle <span class="token operator">--</span>platform android <span class="token operator">--</span>dev <span class="token boolean">false</span> <span class="token operator">--</span>entry<span class="token operator">-</span>file index<span class="token punctuation">.</span>js <span class="token operator">--</span>bundle<span class="token operator">-</span>output android<span class="token operator">/</span>com<span class="token operator">/</span>your<span class="token operator">-</span>company<span class="token operator">-</span>name<span class="token operator">/</span>app<span class="token operator">-</span><span class="token keyword">package</span><span class="token operator">-</span>name<span class="token operator">/</span>src<span class="token operator">/</span>main<span class="token operator">/</span>assets<span class="token operator">/</span>index<span class="token punctuation">.</span>android<span class="token punctuation">.</span>bundle <span class="token operator">--</span>assets<span class="token operator">-</span>dest android<span class="token operator">/</span>com<span class="token operator">/</span>your<span class="token operator">-</span>company<span class="token operator">-</span>name<span class="token operator">/</span>app<span class="token operator">-</span><span class="token keyword">package</span><span class="token operator">-</span>name<span class="token operator">/</span>src<span class="token operator">/</span>main<span class="token regex">/res/</span></div><blockquote><p>Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.</p></blockquote><p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p><span><block class="objc swift android" />
|
||||
|
||||
</span><h3><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/integration-with-existing-apps.html#now-what">#</a></h3><p>At this point you can continue developing your app as usual. Refer to our <a href="/docs/debugging.html" target="">debugging</a> and <a href="docs/running-on-device.html" target="_blank">deployment</a> docs to learn more about working with React Native.</p><span><script>
|
||||
function displayTab(type, value) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user