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
@@ -243,12 +243,134 @@ to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p><span><bloc
|
||||
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>Turn on <a href="docs/debugging.html#reloading-javascript" target="_blank">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li><li><p>If you want to add this new React Native code to an existing application, check out the <a href="docs/integration-with-existing-apps.html" target="_blank">Integration guide</a>.</p></li></ul><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p><span><script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
|
||||
function convertBlocks() {
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
var span = blocks[i].parentNode;
|
||||
var container = span.parentNode;
|
||||
container.insertBefore(block, span);
|
||||
container.removeChild(span);
|
||||
}
|
||||
// Convert <div>...<block />content<block />...</div>
|
||||
// Into <div>...<block>content</block><block />...</div>
|
||||
blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
while (
|
||||
block.nextSibling &&
|
||||
block.nextSibling.tagName !== 'BLOCK'
|
||||
) {
|
||||
block.appendChild(block.nextSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
||||
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
||||
var foundHash = false;
|
||||
if (
|
||||
window.location.hash !== '' &&
|
||||
window.location.hash !== 'content'
|
||||
) {
|
||||
// content is default
|
||||
var hashLinks = document.querySelectorAll(
|
||||
'a.hash-link'
|
||||
);
|
||||
for (
|
||||
var i = 0;
|
||||
i < hashLinks.length && !foundHash;
|
||||
++i
|
||||
) {
|
||||
if (hashLinks[i].hash === window.location.hash) {
|
||||
var parent = hashLinks[i].parentElement;
|
||||
while (parent) {
|
||||
if (parent.tagName === 'BLOCK') {
|
||||
// Could be more than one target os and dev platform, but just choose some sort of order
|
||||
// of priority here.
|
||||
|
||||
// Dev OS
|
||||
if (parent.className.indexOf('mac') > -1) {
|
||||
displayTab('os', 'mac');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('linux') > -1
|
||||
) {
|
||||
displayTab('os', 'linux');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('windows') > -1
|
||||
) {
|
||||
displayTab('os', 'windows');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Target Platform
|
||||
if (parent.className.indexOf('ios') > -1) {
|
||||
displayTab('platform', 'ios');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('android') > -1
|
||||
) {
|
||||
displayTab('platform', 'android');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Guide
|
||||
if (parent.className.indexOf('native') > -1) {
|
||||
displayTab('guide', 'native');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('quickstart') > -1
|
||||
) {
|
||||
displayTab('guide', 'quickstart');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Do the default if there is no matching hash
|
||||
if (!foundHash) {
|
||||
var isMac = navigator.platform === 'MacIntel';
|
||||
var isWindows = navigator.platform === 'Win32';
|
||||
displayTab('platform', isMac ? 'ios' : 'android');
|
||||
displayTab(
|
||||
'os',
|
||||
isMac ? 'mac' : isWindows ? 'windows' : 'linux'
|
||||
);
|
||||
displayTab('guide', 'quickstart');
|
||||
displayTab('language', 'objc');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next btn" href="docs/tutorial.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/GettingStarted.md">Improve this page</a> by sending a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.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/support.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://facebook.github.io/react/" 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-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><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -411,12 +411,134 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<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="_blank">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) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
|
||||
function convertBlocks() {
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
var span = blocks[i].parentNode;
|
||||
var container = span.parentNode;
|
||||
container.insertBefore(block, span);
|
||||
container.removeChild(span);
|
||||
}
|
||||
// Convert <div>...<block />content<block />...</div>
|
||||
// Into <div>...<block>content</block><block />...</div>
|
||||
blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
while (
|
||||
block.nextSibling &&
|
||||
block.nextSibling.tagName !== 'BLOCK'
|
||||
) {
|
||||
block.appendChild(block.nextSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
||||
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
||||
var foundHash = false;
|
||||
if (
|
||||
window.location.hash !== '' &&
|
||||
window.location.hash !== 'content'
|
||||
) {
|
||||
// content is default
|
||||
var hashLinks = document.querySelectorAll(
|
||||
'a.hash-link'
|
||||
);
|
||||
for (
|
||||
var i = 0;
|
||||
i < hashLinks.length && !foundHash;
|
||||
++i
|
||||
) {
|
||||
if (hashLinks[i].hash === window.location.hash) {
|
||||
var parent = hashLinks[i].parentElement;
|
||||
while (parent) {
|
||||
if (parent.tagName === 'BLOCK') {
|
||||
// Could be more than one target os and dev platform, but just choose some sort of order
|
||||
// of priority here.
|
||||
|
||||
// Dev OS
|
||||
if (parent.className.indexOf('mac') > -1) {
|
||||
displayTab('os', 'mac');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('linux') > -1
|
||||
) {
|
||||
displayTab('os', 'linux');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('windows') > -1
|
||||
) {
|
||||
displayTab('os', 'windows');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Target Platform
|
||||
if (parent.className.indexOf('ios') > -1) {
|
||||
displayTab('platform', 'ios');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('android') > -1
|
||||
) {
|
||||
displayTab('platform', 'android');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Guide
|
||||
if (parent.className.indexOf('native') > -1) {
|
||||
displayTab('guide', 'native');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('quickstart') > -1
|
||||
) {
|
||||
displayTab('guide', 'quickstart');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Do the default if there is no matching hash
|
||||
if (!foundHash) {
|
||||
var isMac = navigator.platform === 'MacIntel';
|
||||
var isWindows = navigator.platform === 'Win32';
|
||||
displayTab('platform', isMac ? 'ios' : 'android');
|
||||
displayTab(
|
||||
'os',
|
||||
isMac ? 'mac' : isWindows ? 'windows' : 'linux'
|
||||
);
|
||||
displayTab('guide', 'quickstart');
|
||||
displayTab('language', 'objc');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/colors.html#content">← Previous</a><a class="docs-next btn" href="docs/running-on-device.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/IntegrationWithExistingApps.md">Improve this page</a> by sending a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.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/support.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://facebook.github.io/react/" 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-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><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -141,11 +141,133 @@ emulator<span class="token number">-5554</span> offline # Google emulator
|
||||
</span><h2><a class="anchor" name="building-your-app-for-production"></a>Building your app for production <a class="hash-link" href="docs/running-on-device.html#building-your-app-for-production">#</a></h2><p>You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.</p><h3><a class="anchor" name="1-enable-app-transport-security"></a>1. Enable App Transport Security <a class="hash-link" href="docs/running-on-device.html#1-enable-app-transport-security">#</a></h3><p>App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for <code>localhost</code> by default in React Native projects in order to make development easier.</p><p>You should re-enable ATS prior to building your app for production by removing the <code>localhost</code> entry from the <code>NSExceptionDomains</code> dictionary in your <code>Info.plist</code> file in the <code>ios/</code> folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry.</p><blockquote><p>If your application needs to access HTTP resources on production, see <a href="http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/" target="_blank">this post</a> to learn how to configure ATS on your project.</p></blockquote><h3><a class="anchor" name="2-configure-release-scheme"></a>2. Configure release scheme <a class="hash-link" href="docs/running-on-device.html#2-configure-release-scheme">#</a></h3><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="img/ConfigureReleaseScheme.png" alt=""></p><h3><a class="anchor" name="3-build-app-for-release"></a>3. Build app for release <a class="hash-link" href="docs/running-on-device.html#3-build-app-for-release">#</a></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></blockquote><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="building-your-app-for-production"></a>Building your app for production <a class="hash-link" href="docs/running-on-device.html#building-your-app-for-production">#</a></h2><p>You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for <a href="docs/signed-apk-android.html" target="_blank">generating a signed APK</a> to learn more.</p><span><script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
}
|
||||
|
||||
function convertBlocks() {
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
var span = blocks[i].parentNode;
|
||||
var container = span.parentNode;
|
||||
container.insertBefore(block, span);
|
||||
container.removeChild(span);
|
||||
}
|
||||
// Convert <div>...<block />content<block />...</div>
|
||||
// Into <div>...<block>content</block><block />...</div>
|
||||
blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
while (
|
||||
block.nextSibling &&
|
||||
block.nextSibling.tagName !== 'BLOCK'
|
||||
) {
|
||||
block.appendChild(block.nextSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
||||
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
||||
var foundHash = false;
|
||||
if (
|
||||
window.location.hash !== '' &&
|
||||
window.location.hash !== 'content'
|
||||
) {
|
||||
// content is default
|
||||
var hashLinks = document.querySelectorAll(
|
||||
'a.hash-link'
|
||||
);
|
||||
for (
|
||||
var i = 0;
|
||||
i < hashLinks.length && !foundHash;
|
||||
++i
|
||||
) {
|
||||
if (hashLinks[i].hash === window.location.hash) {
|
||||
var parent = hashLinks[i].parentElement;
|
||||
while (parent) {
|
||||
if (parent.tagName === 'BLOCK') {
|
||||
// Could be more than one target os and dev platform, but just choose some sort of order
|
||||
// of priority here.
|
||||
|
||||
// Dev OS
|
||||
if (parent.className.indexOf('mac') > -1) {
|
||||
displayTab('os', 'mac');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('linux') > -1
|
||||
) {
|
||||
displayTab('os', 'linux');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('windows') > -1
|
||||
) {
|
||||
displayTab('os', 'windows');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Target Platform
|
||||
if (parent.className.indexOf('ios') > -1) {
|
||||
displayTab('platform', 'ios');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('android') > -1
|
||||
) {
|
||||
displayTab('platform', 'android');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Guide
|
||||
if (parent.className.indexOf('native') > -1) {
|
||||
displayTab('guide', 'native');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('quickstart') > -1
|
||||
) {
|
||||
displayTab('guide', 'quickstart');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Do the default if there is no matching hash
|
||||
if (!foundHash) {
|
||||
var isMac = navigator.platform === 'MacIntel';
|
||||
var isWindows = navigator.platform === 'Win32';
|
||||
displayTab('platform', isMac ? 'ios' : 'android');
|
||||
displayTab(
|
||||
'os',
|
||||
isMac ? 'mac' : isWindows ? 'windows' : 'linux'
|
||||
);
|
||||
displayTab('guide', 'quickstart');
|
||||
displayTab('language', 'objc');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/integration-with-existing-apps.html#content">← Previous</a><a class="docs-next btn" href="docs/upgrading.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/RunningOnDevice.md">Improve this page</a> by sending a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.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/support.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://facebook.github.io/react/" 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-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><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -75,10 +75,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// handle tabs in docs
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
|
||||
var backdrop = document.querySelector(
|
||||
'.modal-backdrop'
|
||||
);
|
||||
@@ -160,138 +156,4 @@
|
||||
navigator.userAgent
|
||||
);
|
||||
}
|
||||
|
||||
function convertBlocks() {
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
var span = blocks[i].parentNode;
|
||||
var container = span.parentNode;
|
||||
container.insertBefore(block, span);
|
||||
container.removeChild(span);
|
||||
}
|
||||
// Convert <div>...<block />content<block />...</div>
|
||||
// Into <div>...<block>content</block><block />...</div>
|
||||
blocks = document.querySelectorAll('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
while (
|
||||
block.nextSibling &&
|
||||
block.nextSibling.tagName !== 'BLOCK'
|
||||
) {
|
||||
block.appendChild(block.nextSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function displayTab(type, value) {
|
||||
var container = document.querySelectorAll('block')[
|
||||
0
|
||||
].parentNode;
|
||||
container.className = 'display-' +
|
||||
type +
|
||||
'-' +
|
||||
value +
|
||||
' ' +
|
||||
container.className.replace(
|
||||
RegExp('display-' + type + '-[a-z]+ ?'),
|
||||
''
|
||||
);
|
||||
}
|
||||
|
||||
function guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
||||
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
||||
var foundHash = false;
|
||||
if (
|
||||
window.location.hash !== '' &&
|
||||
window.location.hash !== 'content'
|
||||
) {
|
||||
// content is default
|
||||
var hashLinks = document.querySelectorAll(
|
||||
'a.hash-link'
|
||||
);
|
||||
for (
|
||||
var i = 0;
|
||||
i < hashLinks.length && !foundHash;
|
||||
++i
|
||||
) {
|
||||
if (hashLinks[i].hash === window.location.hash) {
|
||||
var parent = hashLinks[i].parentElement;
|
||||
while (parent) {
|
||||
if (parent.tagName === 'BLOCK') {
|
||||
// Could be more than one target os and dev platform, but just choose some sort of order
|
||||
// of priority here.
|
||||
|
||||
// Dev OS
|
||||
if (parent.className.indexOf('mac') > -1) {
|
||||
displayTab('os', 'mac');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('linux') > -1
|
||||
) {
|
||||
displayTab('os', 'linux');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('windows') > -1
|
||||
) {
|
||||
displayTab('os', 'windows');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Target Platform
|
||||
if (parent.className.indexOf('ios') > -1) {
|
||||
displayTab('platform', 'ios');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('android') > -1
|
||||
) {
|
||||
displayTab('platform', 'android');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
// Guide
|
||||
if (parent.className.indexOf('native') > -1) {
|
||||
displayTab('guide', 'native');
|
||||
foundHash = true;
|
||||
} else if (
|
||||
parent.className.indexOf('quickstart') > -1
|
||||
) {
|
||||
displayTab('guide', 'quickstart');
|
||||
foundHash = true;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Do the default if there is no matching hash
|
||||
if (!foundHash) {
|
||||
var isMac = navigator.platform === 'MacIntel';
|
||||
var isWindows = navigator.platform === 'Win32';
|
||||
displayTab('platform', isMac ? 'ios' : 'android');
|
||||
displayTab(
|
||||
'os',
|
||||
isMac ? 'mac' : isWindows ? 'windows' : 'linux'
|
||||
);
|
||||
displayTab('guide', 'quickstart');
|
||||
displayTab('language', 'objc');
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user