mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for 0.46
This commit is contained in:
1 parent
1bb5e7c747
commit
2af736b09d
160 files changed
+2639
-3017
No files matched your search
+10
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><title>Debugging</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Debugging"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.45</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using List Views</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/components-and-apis.html">Components and APIs</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigating Between Screens</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10pxLine truncated
|
||||
<!DOCTYPE html><html><head><title>Debugging</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Debugging"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.46</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using List Views</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/components-and-apis.html">Components and APIs</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigating Between Screens</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">AnimaLine truncated
|
||||
|
||||
</span><h1><a class="anchor" name="debugging-in-ejected-apps"></a>Debugging in Ejected Apps <a class="hash-link" href="docs/debugging.html#debugging-in-ejected-apps">#</a></h1><span><div class="banner-crna-ejected" style="margin-top:25px">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
@@ -12,14 +12,14 @@
|
||||
</div>
|
||||
|
||||
</span><h2><a class="anchor" name="accessing-console-logs"></a>Accessing console logs <a class="hash-link" href="docs/debugging.html#accessing-console-logs">#</a></h2><p>You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native log<span class="token operator">-</span>ios
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p></blockquote><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><blockquote><p>If you're using Create React Native App, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-javascript">compile <span class="token string">'com.facebook.stetho:stetho:1.3.1'</span>
|
||||
compile <span class="token string">'com.facebook.stetho:stetho-okhttp3:1.3.1'</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code>, add the following imports:</p><div class="prism language-javascript">import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>ReactCookieJarContainer<span class="token punctuation">;</span>
|
||||
import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>Stetho<span class="token punctuation">;</span>
|
||||
import okhttp3<span class="token punctuation">.</span>OkHttpClient<span class="token punctuation">;</span>
|
||||
import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>OkHttpClientProvider<span class="token punctuation">;</span>
|
||||
import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>okhttp3<span class="token punctuation">.</span>StethoInterceptor<span class="token punctuation">;</span>
|
||||
import java<span class="token punctuation">.</span>util<span class="token punctuation">.</span>concurrent<span class="token punctuation">.</span>TimeUnit<span class="token punctuation">;</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code> add the function:</p><div class="prism language-javascript">public void <span class="token function">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
super<span class="token punctuation">.</span><span class="token function">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p></blockquote><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><blockquote><p>If you're using Create React Native App, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-gradle">compile <span class="token string">'com.facebook.stetho:stetho:1.3.1'</span>
|
||||
compile <span class="token string">'com.facebook.stetho:stetho-okhttp3:1.3.1'</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code>, add the following imports:</p><div class="prism language-java"><span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>ReactCookieJarContainer<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>Stetho<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> okhttp3<span class="token punctuation">.</span>OkHttpClient<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>OkHttpClientProvider<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>okhttp3<span class="token punctuation">.</span>StethoInterceptor<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> java<span class="token punctuation">.</span>util<span class="token punctuation">.</span>concurrent<span class="token punctuation">.</span>TimeUnit<span class="token punctuation">;</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code> add the function:</p><div class="prism language-java"><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onCreate<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">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Stetho<span class="token punctuation">.</span><span class="token function">initializeWithDefaults<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
OkHttpClient client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">OkHttpClient<span class="token punctuation">.</span>Builder</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">connectTimeout<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> TimeUnit<span class="token punctuation">.</span>MILLISECONDS<span class="token punctuation">)</span>
|
||||
@@ -45,6 +45,6 @@ import java<span class="token punctuation">.</span>util<span class="token punctu
|
||||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||||
indexName: 'react-native-versions',
|
||||
inputSelector: '#algolia-doc-search',
|
||||
algoliaOptions: { facetFilters: [ "tags:0.45" ], hitsPerPage: 5 }
|
||||
algoliaOptions: { facetFilters: [ "tags:0.46" ], hitsPerPage: 5 }
|
||||
});
|
||||
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script></body></html>
|
||||
Reference in new issue
Block a user