mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Travis CI
14 lines
21 KiB
HTML
14 lines
21 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Android Setup – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Android Setup – 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"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/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="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/platform-specific-code.html#content">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="/react-native/docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/communication-ios.html#content">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="/react-native/docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-building-from-source.html#content">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="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pulltorefreshviewandroid.html#content">PullToRefreshViewAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Android Setup</h1><div><p>This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.</p><h3><a class="anchor" name="install-git"></a>Install Git <a class="hash-link" href="#install-git">#</a></h3><ul><li><p><strong>On Mac</strong>, if you have installed <a href="https://developer.apple.com/xcode/" target="_blank">XCode</a>, Git is already installed, otherwise run the following:</p><div class="prism language-javascript"> brew install git</div></li><li><p><strong>On Linux</strong>, install Git <a href="https://git-scm.com/download/linux" target="_blank">via your package manager</a>.</p></li><li><p><strong>On Windows</strong>, download and install <a href="https://git-for-windows.github.io/" target="_blank">Git for Windows</a>. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your <code>PATH</code> environment variable.</p></li></ul><h3><a class="anchor" name="install-the-android-sdk-unless-you-have-it"></a>Install the Android SDK (unless you have it) <a class="hash-link" href="#install-the-android-sdk-unless-you-have-it">#</a></h3><ol><li><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">Install the latest JDK</a></li><li>Install the Android SDK:<ul><li><strong>On Mac</strong>: <code>brew install android-sdk</code></li><li><strong>On Linux and Windows</strong>: <a href="https://developer.android.com/sdk/installing/index.html" target="_blank">Download from the Android website</a></li></ul></li></ol><h3><a class="anchor" name="define-the-android-home-environment-variable"></a>Define the ANDROID_HOME environment variable <a class="hash-link" href="#define-the-android-home-environment-variable">#</a></h3><p><strong>IMPORTANT</strong>: Make sure the <code>ANDROID_HOME</code> environment variable points to your existing Android SDK:</p><ul><li><p><strong>On Mac</strong>, add this to your <code>~/.bashrc</code>, <code>~/.bash_profile</code> or whatever your shell uses:</p><div class="prism language-javascript"># If you installed the SDK via Homebrew<span class="token punctuation">,</span> otherwise <span class="token operator">~</span><span class="token operator">/</span>Library<span class="token operator">/</span>Android<span class="token operator">/</span>sdk
|
||
export ANDROID_HOME<span class="token operator">=</span><span class="token operator">/</span>usr<span class="token operator">/</span>local<span class="token operator">/</span>opt<span class="token operator">/</span>android<span class="token operator">-</span>sdk</div></li><li><p><strong>On Linux</strong>, add this to your <code>~/.bashrc</code>, <code>~/.bash_profile</code> or whatever your shell uses:</p><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span><path_where_you_unpacked_android_sdk<span class="token operator">></span></div></li><li><p><strong>On Windows</strong>, go to <code>Control Panel</code> -> <code>System and Security</code> -> <code>System</code> -> <code>Change settings</code> -> <code>Advanced</code> -> <code>Environment variables</code> -> <code>New</code></p></li></ul><p><strong>NOTE</strong>: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.</p><h3><a class="anchor" name="use-gradle-daemon"></a>Use gradle daemon <a class="hash-link" href="#use-gradle-daemon">#</a></h3><p>React Native Android use <a href="https://docs.gradle.org" target="_blank">gradle</a> as a build system. We recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code. Learn <a href="https://docs.gradle.org/2.9/userguide/gradle_daemon.html" target="_blank">here</a> how to enable it for your platform.</p><h3><a class="anchor" name="configure-your-sdk"></a>Configure your SDK <a class="hash-link" href="#configure-your-sdk">#</a></h3><ol><li>Open the Android SDK Manager (<strong>on Mac</strong> start a new shell and run <code>android</code>); in the window that appears make sure you check:<ul><li>Android SDK Build-tools version 23.0.1</li><li>Android 6.0 (API 23)</li><li>Android Support Repository</li></ul></li><li>Click "Install Packages"</li></ol><p><img src="/react-native/img/AndroidSDK1.png" alt="SDK Manager window"> <img src="/react-native/img/AndroidSDK2.png" alt="SDK Manager window"></p><h3><a class="anchor" name="install-genymotion"></a>Install Genymotion <a class="hash-link" href="#install-genymotion">#</a></h3><p>Genymotion is much easier to set up than stock Google emulators. However, it's only free for personal use. If you want to use the stock Google emulator, see below.</p><ol><li>Download and install <a href="https://www.genymotion.com/" target="_blank">Genymotion</a>.</li><li>Open Genymotion. It might ask you to install VirtualBox unless you already have it.</li><li>Create a new emulator and start it.</li><li>To bring up the developer menu press ⌘+M</li></ol><h3><a class="anchor" name="alternative-create-a-stock-google-emulator"></a>Alternative: Create a stock Google emulator <a class="hash-link" href="#alternative-create-a-stock-google-emulator">#</a></h3><ol><li>Start a new shell and run <code>android</code>; in the window that appears make sure you check:<ul><li>Intel x86 Atom System Image (for Android 5.1.1 - API 22)</li><li>Intel x86 Emulator Accelerator (HAXM installer)</li></ul></li><li>Click "Install Packages".</li><li><a href="http://developer.android.com/tools/devices/emulator.html#vm-mac" target="_blank">Configure hardware acceleration (HAXM)</a>, otherwise the emulator is going to be slow.</li><li>Create an Android Virtual Device (AVD):<ol><li>Run <code>android avd</code> and click on <strong>Create...</strong>
|
||
<img src="/react-native/img/CreateAVD.png" alt="Create AVD dialog"></li><li>With the new AVD selected, click <code>Start...</code></li></ol></li><li>To bring up the developer menu press F2 (or install <a href="http://getfrappe.com" target="_blank">Frappé</a>)</li></ol><h3><a class="anchor" name="windows-hyper-v-alternative"></a>Windows Hyper-V Alternative <a class="hash-link" href="#windows-hyper-v-alternative">#</a></h3><p>The <a href="https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx" target="_blank">Visual Studio Emulator for Android</a> is a free android emulator that is hardware accelerated via Hyper-V. It doesn't require you to install Visual Studio at all.</p><p>To use it with react-native you just have to add a key and value to your registry:</p><ol><li>Open the Run Command (Windows+R)</li><li>Enter <code>regedit.exe</code></li><li>In the Registry Editor navigate to <code>HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools</code></li><li>Right Click on <code>Android SDK Tools</code> and choose <code>New > String Value</code></li><li>Set the name to <code>Path</code></li><li>Double Click the new <code>Path</code> Key and set the value to <code>C:\Program Files\Android\sdk</code>. The path value might be different on your machine.</li></ol><p>You will also need to run the command <code>adb reverse tcp:8081 tcp:8081</code> with this emulator.</p><p>Then restart the emulator and when it runs you can just do <code>react-native run-android</code> as usual.</p></div><div class="docs-prevnext"><a class="docs-next" href="linux-windows-support.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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");
|
||
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script src="/react-native/js/scripts.js"></script></body></html> |