mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
36 lines
24 KiB
HTML
36 lines
24 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Running On Device – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Running On Device – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><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"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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.27</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="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" 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>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li></ul></div><div class="nav-docs-section"><h3>Tutorials</h3><ul><li><a style="margin-left:0;" class="" href="docs/tutorial-core-components.html">Core Components</a></li></ul></div><div class="nav-docs-section"><h3>Sample Applications</h3><ul><li><a style="margin-left:0;" class="" href="docs/sample-application-movies.html">Movie Fetcher</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://makeitopen.com/">F8 2016 App</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:0;" class="active" href="docs/running-on-device-android.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="running-on-device"></a>Running On Device <a class="hash-link" href="docs/running-on-device-android.html#running-on-device">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/0.27-stable/docs/RunningOnDeviceAndroid.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="prerequisite-usb-debugging"></a>Prerequisite: USB Debugging <a class="hash-link" href="docs/running-on-device-android.html#prerequisite-usb-debugging">#</a></h2><p>You'll need this in order to install your app on your device. First, make sure you have <a href="https://www.google.com/search?q=android+Enable+USB+debugging" target="_blank">USB debugging enabled on your device</a>.</p><p>Check that your device has been <strong>successfully connected</strong> by running <code>adb devices</code>:</p><div class="prism language-javascript">$ adb devices
|
||
List of devices attached
|
||
emulator<span class="token number">-5554</span> offline # Google emulator
|
||
14ed2fcc device # Physical device</div><p>Seeing <strong>device</strong> in the right column means the device is connected. Android - go figure :) You must have <strong>only one device connected</strong>.</p><p>Now you can use <code>react-native run-android</code> to install and launch your app on the device.</p><h2><a class="anchor" name="setting-up-an-android-device"></a>Setting up an Android Device <a class="hash-link" href="docs/running-on-device-android.html#setting-up-an-android-device">#</a></h2><p>Let's now set up an Android device to run our React Native projects.</p><p>First thing is to plug in your device and check the manufacturer code by using <code>lsusb</code>, which should output something like this:</p><div class="prism language-javascript">$ lsusb
|
||
Bus <span class="token number">002</span> Device <span class="token number">002</span><span class="token punctuation">:</span> ID <span class="token number">8087</span><span class="token punctuation">:</span><span class="token number">0024</span> Intel Corp<span class="token punctuation">.</span> Integrated Rate Matching Hub
|
||
Bus <span class="token number">002</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub
|
||
Bus <span class="token number">001</span> Device <span class="token number">003</span><span class="token punctuation">:</span> ID 22b8<span class="token punctuation">:</span><span class="token number">2e76</span> Motorola PCS
|
||
Bus <span class="token number">001</span> Device <span class="token number">002</span><span class="token punctuation">:</span> ID <span class="token number">8087</span><span class="token punctuation">:</span><span class="token number">0024</span> Intel Corp<span class="token punctuation">.</span> Integrated Rate Matching Hub
|
||
Bus <span class="token number">001</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub
|
||
Bus <span class="token number">004</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0003</span> Linux Foundation <span class="token number">3.0</span> root hub
|
||
Bus <span class="token number">003</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub</div><p>These lines represent the USB devices currently connected to your machine.</p><p>You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:</p><div class="prism language-javascript">$ lsusb
|
||
Bus <span class="token number">002</span> Device <span class="token number">002</span><span class="token punctuation">:</span> ID <span class="token number">8087</span><span class="token punctuation">:</span><span class="token number">0024</span> Intel Corp<span class="token punctuation">.</span> Integrated Rate Matching Hub
|
||
Bus <span class="token number">002</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub
|
||
Bus <span class="token number">001</span> Device <span class="token number">002</span><span class="token punctuation">:</span> ID <span class="token number">8087</span><span class="token punctuation">:</span><span class="token number">0024</span> Intel Corp<span class="token punctuation">.</span> Integrated Rate Matching Hub
|
||
Bus <span class="token number">001</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub
|
||
Bus <span class="token number">004</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0003</span> Linux Foundation <span class="token number">3.0</span> root hub
|
||
Bus <span class="token number">003</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub</div><p>You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.</p><p><code>Bus 001 Device 003: ID 22b8:2e76 Motorola PCS</code></p><p>From the above line, you want to grab the first four digits from the device ID:</p><p><code>22b8:2e76</code></p><p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p><p>You'll need to input this into your udev rules in order to get up and running:</p><div class="prism language-javascript">echo SUBSYSTEM<span class="token operator">==</span><span class="token string">"usb"</span><span class="token punctuation">,</span> ATTR<span class="token punctuation">{</span>idVendor<span class="token punctuation">}</span><span class="token operator">==</span><span class="token string">"22b8"</span><span class="token punctuation">,</span> MODE<span class="token operator">=</span><span class="token string">"0666"</span><span class="token punctuation">,</span> GROUP<span class="token operator">=</span><span class="token string">"plugdev"</span> <span class="token operator">|</span> sudo tee <span class="token operator">/</span>etc<span class="token operator">/</span>udev<span class="token operator">/</span>rules<span class="token punctuation">.</span>d<span class="token operator">/</span><span class="token number">51</span><span class="token operator">-</span>android<span class="token operator">-</span>usb<span class="token punctuation">.</span>rules</div><p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p><p>Now check that your device is properly connecting to ADB, the Android Debug Bridge, by using <code>adb devices</code>.</p><div class="prism language-javascript">List of devices attached
|
||
TA9300GLMK device</div><h2><a class="anchor" name="accessing-development-server-from-device"></a>Accessing development server from device <a class="hash-link" href="docs/running-on-device-android.html#accessing-development-server-from-device">#</a></h2><p>You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.</p><blockquote><p>Hint</p><p>Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (to reload, debug, etc.). Alternatively, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the <a href="http://developer.android.com/reference/android/view/KeyEvent.html#KEYCODE_MENU" target="_blank">Menu</a> key code).</p></blockquote><h3><a class="anchor" name="using-adb-reverse"></a>Using adb reverse <a class="hash-link" href="docs/running-on-device-android.html#using-adb-reverse">#</a></h3><blockquote><p>Note that this option is available on devices running android 5.0+ (API 21).</p></blockquote><p>Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).</p><ol><li>Run <code>adb reverse tcp:8081 tcp:8081</code></li><li>You can use <code>Reload JS</code> and other development options with no extra configuration</li></ol><h3><a class="anchor" name="configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi"></a>Configure your app to connect to the local dev server via Wi-Fi <a class="hash-link" href="docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi">#</a></h3><ol><li>Make sure your laptop and your phone are on the <strong>same Wi-Fi network</strong>.</li><li>Open your React Native app on your device. You can do this the same way you'd open any other app.</li><li>You'll see a red screen with an error. This is OK. The following steps will fix that.</li><li>Open the <strong>Developer menu</strong> by shaking the device or running <code>adb shell input keyevent 82</code> from the command line.</li><li>Go to <code>Dev Settings</code>.</li><li>Go to <code>Debug server host for device</code>.</li><li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). <strong>On Mac</strong>, you can find the IP address in System Preferences / Network. <strong>On Windows</strong>, open the command prompt and type <code>ipconfig</code> to find your machine's IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information" target="_blank">more info</a>).</li><li>Go back to the <strong>Developer menu</strong> and select <code>Reload JS</code>.</li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/embedded-app-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></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(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
|
||
docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#algolia-doc-search',
|
||
algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 }
|
||
});
|
||
</script><script src="js/scripts.js"></script></body></html> |