mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
@@ -41,6 +41,8 @@
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/next/touchablenativefeedback.html"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
|
||||
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
|
||||
<p>Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add 'android:screenOrientation=”portrait”' to lock to portrait or 'android:screenOrientation=”landscape”' to lock to landscape.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="learn-more"></a><a href="#learn-more" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Learn more</h1>
|
||||
<p><a href="https://material.io/">Material Design</a> and <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/">Human Interface Guidelines</a> are great resources for learning more about designing for mobile platforms.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="accessibility.html">← Accessibility</a><a class="docs-next button" href="timers.html">Timers →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -431,14 +431,14 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<blockquote>
|
||||
<p>If you want to ensure that you are always using a specific React Native version in your native build, replace <code>+</code> with an actual React Native version you've downloaded from <code>npm</code>.</p>
|
||||
</blockquote>
|
||||
<p>Add an entry for the local React Native maven directory to <code>build.gradle</code>. Be sure to add it to the "allprojects" block:</p>
|
||||
<p>Add an entry for the local React Native maven directory to <code>build.gradle</code>. Be sure to add it to the "allprojects" block, above other maven repositories:</p>
|
||||
<pre><code class="hljs">allprojects {
|
||||
repositories {
|
||||
...
|
||||
maven {
|
||||
<span class="hljs-regexp">//</span> All <span class="hljs-keyword">of</span> React Native (JS, Android binaries) <span class="hljs-keyword">is</span> installed <span class="hljs-keyword">from</span> <span class="hljs-built_in">npm</span>
|
||||
url <span class="hljs-string">"$rootDir/../node_modules/react-native/android"</span>
|
||||
}
|
||||
...
|
||||
}
|
||||
...
|
||||
}
|
||||
|
||||
@@ -241,7 +241,27 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Build app for release</h3>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-configure-app-to-use-static-bundle"></a><a href="#3-configure-app-to-use-static-bundle" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Configure app to use static bundle</h3>
|
||||
<p>During the development process, React Native has loaded your JavaScript code dynamically at runtime. For a production build, you want to pre-package the JavaScript bundle and distribute it inside your application. Doing this requires a code change in your code so that it knows to load the static bundle.</p>
|
||||
<p>In <code>AppDelegate.m</code>, change the default <code>jsCodeLocation</code> to point to the static bundle that is built in Release.</p>
|
||||
<pre><code class="hljs css objc"> jsCodeLocation = [[<span class="hljs-built_in">NSBundle</span> mainBundle] URLForResource:<span class="hljs-string">@"main"</span> withExtension:<span class="hljs-string">@"jsbundle"</span>];
|
||||
</code></pre>
|
||||
<p>This will now reference the <code>main.jsbundle</code> resource file that is created during the <code>Bundle React Native code and images</code> Build Phase in Xcode.</p>
|
||||
<blockquote>
|
||||
<p>Note: The static bundle is built every time you target a physical device, even in Debug. If you want to save time, turn off bundle generation in Debug by adding the following to your shell script in the Xcode Build Phase <code>Bundle React Native code and images</code>:</p>
|
||||
</blockquote>
|
||||
<pre><code class="hljs css shell"> if [ "${CONFIGURATION}" == "Debug" ]; then
|
||||
export SKIP_BUNDLING=true
|
||||
fi
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" name="pro-tip"></a><a href="#pro-tip" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Pro Tip</h4>
|
||||
<p>As your App Bundle grows in size, you may start to see a white screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to <code>AppDelegate.m</code> in order to keep your splash screen displayed during the transition.</p>
|
||||
<pre><code class="hljs css objc"> <span class="hljs-comment">// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"</span>
|
||||
<span class="hljs-built_in">UIView</span>* launchScreenView = [[[<span class="hljs-built_in">NSBundle</span> mainBundle] loadNibNamed:<span class="hljs-string">@"LaunchScreen"</span> owner:<span class="hljs-keyword">self</span> options:<span class="hljs-literal">nil</span>] objectAtIndex:<span class="hljs-number">0</span>];
|
||||
launchScreenView.frame = <span class="hljs-keyword">self</span>.window.bounds;
|
||||
rootView.loadingView = launchScreenView;
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="4-build-app-for-release"></a><a href="#4-build-app-for-release" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
<p>You can also use the <code>React Native CLI</code> to perform this operation using the option <code>--configuration</code> with the value <code>Release</code> (e.g. <code>react-native run-ios --configuration Release</code>).</p>
|
||||
|
||||
Reference in New Issue
Block a user