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
@@ -14,8 +14,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token punctuation">}</span></div><div class="prism language-javascript">
|
||||
<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>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
|
||||
@@ -5,8 +5,7 @@ NSDictionary <span class="token operator">*</span>props <span class="token opera
|
||||
|
||||
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> initWithBridge<span class="token punctuation">:</span>bridge
|
||||
moduleName<span class="token punctuation">:</span>@<span class="token string">"ImageBrowserApp"</span>
|
||||
initialProperties<span class="token punctuation">:</span>props<span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
initialProperties<span class="token punctuation">:</span>props<span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="prism language-javascript">
|
||||
<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>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -77,7 +77,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">return</span> allowed<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="javascript-interface"></a>JavaScript Interface <a class="hash-link" href="docs/custom-webview-ios.html#javascript-interface">#</a></h2><p>To use your custom web view, you'll need to create a class for it. Your class must:</p><ul><li>Export all the prop types from <code>WebView.propTypes</code></li><li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li></ul><p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p><div class="prism language-js"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="javascript-interface"></a>JavaScript Interface <a class="hash-link" href="docs/custom-webview-ios.html#javascript-interface">#</a></h2><p>To use your custom web view, you'll need to create a class for it. Your class must:</p><ul><li>Export all the prop types from <code>WebView.propTypes</code></li><li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li></ul><p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p><div class="prism language-js">
|
||||
<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <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> WebView<span class="token punctuation">,</span> requireNativeComponent<span class="token punctuation">,</span> NativeModules <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> CustomWebViewManager <span class="token punctuation">}</span> <span class="token operator">=</span> NativeModules<span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -163,8 +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-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><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 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>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
@@ -294,8 +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-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 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 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>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
|
||||
@@ -70,8 +70,7 @@ ReadableArray <span class="token operator">-</span><span class="token operator">
|
||||
<span class="token keyword">return</span> Arrays<span class="token punctuation">.</span><ReactPackage<span class="token operator">></span><span class="token function">asList<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 keyword">new</span> <span class="token class-name">AnExampleReactPackage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // <-- Add this line with your package name.
|
||||
</span><span class="token punctuation">}</span></div><p>To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p><div class="prism language-js"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token comment" spellcheck="true">/**
|
||||
</span><span class="token punctuation">}</span></div><p>To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p><div class="prism language-js"><span class="token comment" spellcheck="true">/**
|
||||
* This exposes the native ToastExample module as a JS module. This has a
|
||||
* function 'show' which takes the following parameters:
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user