Consolidate Running on Device (Android|iOS) Guides into one
Summary: The RunningOnDeviceAndroid doc had some Linux-specific instructions that are not relevant to macOS/Windows users. Closes https://github.com/facebook/react-native/pull/10726 Differential Revision: D4139089 Pulled By: JoelMarcey fbshipit-source-id: cc57c1d7e3c9dec94e123c3597ac78b3efb15dd0
This commit is contained in:
Héctor Ramos
Facebook Github Bot
parent
fb7fe2d4e8
commit
72369ee4d2
|
|
@ -17,7 +17,7 @@ Mac OS and Xcode are required.
|
|||
- Open `Examples/Movies/Movies.xcodeproj` in Xcode
|
||||
- Hit the Run button
|
||||
|
||||
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
|
||||
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.
|
||||
|
||||
### Running on Android
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._
|
|||
|
||||
Open the Movies app in your emulator.
|
||||
|
||||
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.
|
||||
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.
|
||||
|
||||
### Running with Buck
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Mac OS and Xcode are required.
|
|||
- Open `Examples/UIExplorer/UIExplorer.xcodeproj` in Xcode
|
||||
- Hit the Run button
|
||||
|
||||
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
|
||||
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.
|
||||
|
||||
### Running on Android
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._
|
|||
|
||||
Open the UIExplorer app in your emulator.
|
||||
|
||||
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.
|
||||
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.
|
||||
|
||||
### Running with Buck
|
||||
|
||||
|
|
|
|||
|
|
@ -17,40 +17,40 @@ want to develop for both iOS and Android, that's fine - you just have to pick
|
|||
one to start with, since the setup is a bit different.
|
||||
|
||||
<div class="toggler">
|
||||
<style>
|
||||
.toggler a {
|
||||
display: inline-block;
|
||||
padding: 10px 5px;
|
||||
margin: 2px;
|
||||
border: 1px solid #05A5D1;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.display-os-mac .toggler .button-mac,
|
||||
.display-os-linux .toggler .button-linux,
|
||||
.display-os-windows .toggler .button-windows,
|
||||
.display-platform-ios .toggler .button-ios,
|
||||
.display-platform-android .toggler .button-android {
|
||||
background-color: #05A5D1;
|
||||
color: white;
|
||||
}
|
||||
block { display: none; }
|
||||
.display-platform-ios.display-os-mac .ios.mac,
|
||||
.display-platform-ios.display-os-linux .ios.linux,
|
||||
.display-platform-ios.display-os-windows .ios.windows,
|
||||
.display-platform-android.display-os-mac .android.mac,
|
||||
.display-platform-android.display-os-linux .android.linux,
|
||||
.display-platform-android.display-os-windows .android.windows {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<span>Mobile OS:</span>
|
||||
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
<span>Development OS:</span>
|
||||
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
|
||||
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||
<style>
|
||||
.toggler a {
|
||||
display: inline-block;
|
||||
padding: 10px 5px;
|
||||
margin: 2px;
|
||||
border: 1px solid #05A5D1;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.display-os-mac .toggler .button-mac,
|
||||
.display-os-linux .toggler .button-linux,
|
||||
.display-os-windows .toggler .button-windows,
|
||||
.display-platform-ios .toggler .button-ios,
|
||||
.display-platform-android .toggler .button-android {
|
||||
background-color: #05A5D1;
|
||||
color: white;
|
||||
}
|
||||
block { display: none; }
|
||||
.display-platform-ios.display-os-mac .ios.mac,
|
||||
.display-platform-ios.display-os-linux .ios.linux,
|
||||
.display-platform-ios.display-os-windows .ios.windows,
|
||||
.display-platform-android.display-os-mac .android.mac,
|
||||
.display-platform-android.display-os-linux .android.linux,
|
||||
.display-platform-android.display-os-windows .android.windows {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<span>Mobile OS:</span>
|
||||
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
<span>Development OS:</span>
|
||||
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
|
||||
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||
</div>
|
||||
|
||||
<block class="linux windows ios" />
|
||||
|
|
@ -326,7 +326,25 @@ Congratulations! You've successfully run and modified your first React Native ap
|
|||
|
||||
<center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
<block class="windows linux android" />
|
||||
<block class="windows android" />
|
||||
|
||||
## Testing your React Native Installation
|
||||
|
||||
Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run `react-native start` inside the newly created folder to start the packager.
|
||||
|
||||
```
|
||||
react-native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react-native start
|
||||
```
|
||||
|
||||
Open a new command prompt and run `react-native run-android` inside the same folder to launch the app on your AVD.
|
||||
|
||||
```
|
||||
react-native run-android
|
||||
```
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
## Testing your React Native Installation
|
||||
|
||||
|
|
@ -338,14 +356,13 @@ cd AwesomeProject
|
|||
react-native run-android
|
||||
```
|
||||
|
||||
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
|
||||
<block class="windows linux android" />
|
||||
|
||||
> A common issue is that the packager is not started automatically when you run
|
||||
`react-native run-android`. You can start it manually using `react-native start`.
|
||||
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
> If you hit a `ERROR Watcher took too long to load` on Windows, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
|
||||
> If you hit a `ERROR Watcher took too long to load`, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Headless JS
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/headless-js-android.html
|
||||
next: running-on-device-android
|
||||
next: signed-apk-android
|
||||
previous: native-components-android
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ The keys to integrating React Native components into your iOS application are to
|
|||
5. Start the React Native server and run your native application.
|
||||
6. Optionally add more React Native components.
|
||||
7. [Debug](/react-native/releases/next/docs/debugging.html).
|
||||
8. Prepare for [deployment](/react-native/docs/running-on-device-ios.html) (e.g., via the `react-native-xcode.sh` script).
|
||||
8. Prepare for [deployment](/react-native/docs/running-on-device.html) (e.g., via the `react-native-xcode.sh` script).
|
||||
9. Deploy and Profit!
|
||||
|
||||
<block class="android" />
|
||||
|
|
@ -72,7 +72,7 @@ The keys to integrating React Native components into your Android application ar
|
|||
5. Start the React Native server and run your native application.
|
||||
6. Optionally add more React Native components.
|
||||
7. [Debug](/react-native/releases/next/docs/debugging.html).
|
||||
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](/react-native/docs/running-on-device-android.html).
|
||||
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](/react-native/docs/running-on-device.html).
|
||||
9. Deploy and Profit!
|
||||
|
||||
<block class="objc swift android" />
|
||||
|
|
@ -612,7 +612,7 @@ Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
|
|||
If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:
|
||||
|
||||
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
|
||||
|
||||
|
||||
This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.
|
||||
|
||||
## Add native code
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Linking Libraries
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/linking-libraries-ios.html
|
||||
next: running-on-device-ios
|
||||
next: running-on-simulator-ios
|
||||
previous: native-components-ios
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,299 @@
|
|||
---
|
||||
id: running-on-device
|
||||
title: Running On Device
|
||||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/running-on-device.html
|
||||
next: javascript-environment
|
||||
previous: testing
|
||||
---
|
||||
|
||||
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device.
|
||||
|
||||
<div class="toggler">
|
||||
<style>
|
||||
.toggler a {
|
||||
display: inline-block;
|
||||
padding: 10px 5px;
|
||||
margin: 2px;
|
||||
border: 1px solid #05A5D1;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.display-os-mac .toggler .button-mac,
|
||||
.display-os-linux .toggler .button-linux,
|
||||
.display-os-windows .toggler .button-windows,
|
||||
.display-platform-ios .toggler .button-ios,
|
||||
.display-platform-android .toggler .button-android {
|
||||
background-color: #05A5D1;
|
||||
color: white;
|
||||
}
|
||||
block { display: none; }
|
||||
.display-platform-ios.display-os-mac .ios.mac,
|
||||
.display-platform-ios.display-os-linux .ios.linux,
|
||||
.display-platform-ios.display-os-windows .ios.windows,
|
||||
.display-platform-android.display-os-mac .android.mac,
|
||||
.display-platform-android.display-os-linux .android.linux,
|
||||
.display-platform-android.display-os-windows .android.windows {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<span>Mobile OS:</span>
|
||||
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
<span>Development OS:</span>
|
||||
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
|
||||
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||
</div>
|
||||
|
||||
<block class="mac linux windows ios" />
|
||||
|
||||
## Setting up an iOS device
|
||||
|
||||
Installing an app on an iOS device requires a Mac, an Apple ID, and a USB cable.
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
Connect your device to your Mac via USB, then open Xcode. In the project navigator, choose your device from the Scheme toolbar menu. Xcode will then register your device for development.
|
||||
|
||||
> If you run into any issues, please take a look at Apple's [Launching Your App on a Device docs](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4).
|
||||
|
||||
Finally, select your phone as the build target and press **Build and run(()).
|
||||
|
||||
|
||||
<block class="mac windows linux android" />
|
||||
|
||||
## Setting up an Android device
|
||||
|
||||
Running an Android app on a device requires a Mac or PC and a USB cable.
|
||||
|
||||
### 1. Enable Debugging over USB
|
||||
|
||||
Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.
|
||||
|
||||
To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to **Settings** → **About phone** and then tapping the `Build number` row at the bottom seven times. You can then go back to **Settings** → **Developer options** to enable "USB debugging".
|
||||
|
||||
### 2. Plug in your device via USB
|
||||
|
||||
Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
Next, check the manufacturer code by using `lsusb` (on mac, you must first [install lsusb](https://github.com/jlhonora/lsusb)). `lsusb` should output something like this:
|
||||
|
||||
```bash
|
||||
$ lsusb
|
||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
|
||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
```
|
||||
|
||||
These lines represent the USB devices currently connected to your machine.
|
||||
|
||||
You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:
|
||||
|
||||
```bash
|
||||
$ lsusb
|
||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS`
|
||||
|
||||
From the above line, you want to grab the first four digits from the device ID:
|
||||
|
||||
`22b8:2e76`
|
||||
|
||||
In this case, it's `22b8`. That's the identifier for Motorola.
|
||||
|
||||
You'll need to input this into your udev rules in order to get up and running:
|
||||
|
||||
```sh
|
||||
echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
|
||||
```
|
||||
|
||||
Make sure that you replace `22b8` with the identifier you get in the above command.
|
||||
|
||||
<block class="mac windows linux android" />
|
||||
|
||||
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`.
|
||||
|
||||
```
|
||||
$ adb devices
|
||||
List of devices attached
|
||||
emulator-5554 offline # Google emulator
|
||||
14ed2fcc device # Physical device
|
||||
```
|
||||
|
||||
Seeing `device` in the right column means the device is connected. You must have **only one device connected** at a time.
|
||||
|
||||
### 3. Run your app
|
||||
|
||||
Type the following in your command prompt to install and launch your app on the device:
|
||||
|
||||
```
|
||||
$ react-native run-android
|
||||
```
|
||||
|
||||
> If you get a "bridge configuration isn't available" error, see [Using adb reverse](#using-adb-reverse).
|
||||
|
||||
<block class="mac windows linux android ios" />
|
||||
|
||||
## Connecting to the development server
|
||||
|
||||
You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
|
||||
|
||||
### Method 1: Using adb reverse (recommended)
|
||||
|
||||
<block class="mac windows linux android" />
|
||||
|
||||
You can use this method if your device is running Android 5.0 (Lollipop), it has USB debugging enabled, and it is connected via USB to your development machine.
|
||||
|
||||
<block class="mac windows linux android ios" />
|
||||
|
||||
Run the following in a command prompt:
|
||||
|
||||
```
|
||||
$ adb reverse tcp:8081 tcp:8081
|
||||
```
|
||||
|
||||
You can now use `Reload JS` from the React Native in-app Developer menu without any additional configuration.
|
||||
|
||||
### Method 2: Connect via Wi-Fi
|
||||
|
||||
You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
|
||||
|
||||
<block class="mac android ios" />
|
||||
|
||||
You can find the IP address in **System Preferences** → **Network**.
|
||||
|
||||
<block class="windows android ios" />
|
||||
|
||||
Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).
|
||||
|
||||
<block class="linux android ios" />
|
||||
|
||||
Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.
|
||||
|
||||
<block class="mac windows linux android ios" />
|
||||
|
||||
1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
|
||||
2. Open your React Native app on your device.
|
||||
3. You'll see a [red screen with an error](/react-native/docs/debugging.html#in-app-errors-and-warnings). This is OK. The following steps will fix that.
|
||||
4. Open the in-app [Developer menu](/react-native/docs/debugging.html#accessing-the-in-app-developer-menu).
|
||||
5. Go to **Dev Settings** → **Debug server host for device**.
|
||||
6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
|
||||
7. Go back to the **Developer menu** and select **Reload JS**.
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
## Building your app for production
|
||||
|
||||
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.
|
||||
|
||||
Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. To do this, go to **Product** → **Scheme** → **Edit Scheme (cmd + <)**, make sure you're in the **Run** tab from the side, and set the Build Configuration dropdown to `Release`.
|
||||
|
||||
Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also load the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
|
||||
|
||||
Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.
|
||||
|
||||
### App Transport Security
|
||||
|
||||
App Transport Security is a security feature, added 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 by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the `NSAllowsArbitraryLoads` entry from your `Info.plist` file in the `ios/` folder.
|
||||
|
||||
To learn more about how to configure ATS on your own Xcode projects, see [this post on ATS][cats].
|
||||
|
||||
[cats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
|
||||
|
||||
<script>
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.getElementsByTagName('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.getElementsByTagName('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 display(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
}
|
||||
|
||||
// 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') {
|
||||
var devOS = null;
|
||||
var targetPlatform = null;
|
||||
// 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) {
|
||||
devOS = 'mac';
|
||||
} else if (parent.className.indexOf('linux') > -1) {
|
||||
devOS = 'linux';
|
||||
} else if (parent.className.indexOf('windows') > -1) {
|
||||
devOS = 'windows';
|
||||
} else {
|
||||
break; // assume we don't have anything.
|
||||
}
|
||||
|
||||
// Target Platform
|
||||
if (parent.className.indexOf('ios') > -1) {
|
||||
targetPlatform = 'ios';
|
||||
} else if (parent.className.indexOf('android') > -1) {
|
||||
targetPlatform = 'android';
|
||||
} else {
|
||||
break; // assume we don't have anything.
|
||||
}
|
||||
// We would have broken out if both targetPlatform and devOS hadn't been filled.
|
||||
display('os', devOS);
|
||||
display('platform', targetPlatform);
|
||||
foundHash = true;
|
||||
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';
|
||||
display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
|
||||
display('platform', isMac ? 'ios' : 'android');
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,122 +1,7 @@
|
|||
---
|
||||
id: running-on-device-android
|
||||
title: Running On Device
|
||||
layout: docs
|
||||
category: Guides (Android)
|
||||
layout: redirect
|
||||
permalink: docs/running-on-device-android.html
|
||||
next: signed-apk-android
|
||||
previous: headless-js-android
|
||||
destinationUrl: running-on-device.html
|
||||
---
|
||||
|
||||
## Prerequisite: USB Debugging
|
||||
|
||||
You'll need this in order to install your app on your device. First, make sure you have [USB debugging enabled on your device](https://www.google.com/search?q=android+Enable+USB+debugging).
|
||||
|
||||
Check that your device has been **successfully connected** by running `adb devices`:
|
||||
|
||||
$ adb devices
|
||||
List of devices attached
|
||||
emulator-5554 offline # Google emulator
|
||||
14ed2fcc device # Physical device
|
||||
|
||||
Seeing **device** in the right column means the device is connected. Android - go figure :) You must have **only one device connected**.
|
||||
|
||||
Now you can use `react-native run-android` to install and launch your app on the device. If you get a "bridge configuration isn't available" error, see the `Using adb reverse` section below.
|
||||
|
||||
## Setting up an Android Device
|
||||
|
||||
Let's now set up an Android device to run our React Native projects.
|
||||
|
||||
First thing is to plug in your device and check the manufacturer code by using `lsusb` (on mac, you must first [install lsusb](https://github.com/jlhonora/lsusb)). `lsusb` should output something like this:
|
||||
|
||||
```bash
|
||||
$ lsusb
|
||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
|
||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
```
|
||||
These lines represent the USB devices currently connected to your machine.
|
||||
|
||||
You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:
|
||||
|
||||
```bash
|
||||
$ lsusb
|
||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||
```
|
||||
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.
|
||||
|
||||
`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS`
|
||||
|
||||
From the above line, you want to grab the first four digits from the device ID:
|
||||
|
||||
`22b8:2e76`
|
||||
|
||||
In this case, it's `22b8`. That's the identifier for Motorola.
|
||||
|
||||
You'll need to input this into your udev rules in order to get up and running:
|
||||
|
||||
```sh
|
||||
echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
|
||||
```
|
||||
|
||||
Make sure that you replace `22b8` with the identifier you get in the above command.
|
||||
|
||||
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by using `adb devices`.
|
||||
|
||||
```bash
|
||||
List of devices attached
|
||||
TA9300GLMK device
|
||||
```
|
||||
|
||||
## Accessing development server from device
|
||||
|
||||
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.
|
||||
|
||||
> Hint
|
||||
>
|
||||
> 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 `adb shell input keyevent 82` to open the dev menu (82 being the [Menu](http://developer.android.com/reference/android/view/KeyEvent.html#KEYCODE_MENU) key code).
|
||||
|
||||
### Using adb reverse
|
||||
|
||||
> Note that this option is available on devices running android 5.0+ (API 21).
|
||||
|
||||
Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).
|
||||
|
||||
1. Run `adb reverse tcp:8081 tcp:8081`
|
||||
2. You can use `Reload JS` and other development options with no extra configuration
|
||||
|
||||
|
||||
### Running packager on a non-standard port
|
||||
|
||||
Launch the packager manually with `react-native start --port [PORT]`
|
||||
|
||||
For Android: Use the developer menu by clicking the menu button or shake. Select 'Debug server host & port for device' to set a different port.
|
||||
<center>
|
||||
<img src="img/AndroidDeveloperMenu.png" width="162" />
|
||||
<img src="img/AndroidDevSettings.png" width="150" />
|
||||
<img src="img/AndroidDevServerDialog.png" width="150" />
|
||||
</center>
|
||||
|
||||
For IOS: Edit the AppDelegate.m and change the line below to match the port number you're running:
|
||||
|
||||
```jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];```
|
||||
|
||||
### Configure your app to connect to the local dev server via Wi-Fi
|
||||
|
||||
1. Make sure your laptop and your phone are on the **same Wi-Fi network**.
|
||||
2. Open your React Native app on your device. You can do this the same way you'd open any other app.
|
||||
3. You'll see a red screen with an error. This is OK. The following steps will fix that.
|
||||
4. Open the **Developer menu** by shaking the device or running `adb shell input keyevent 82` from the command line.
|
||||
5. Go to `Dev Settings`.
|
||||
6. Go to `Debug server host for device`.
|
||||
7. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). **On Mac**, you can find the IP address in System Preferences / Network. **On Windows**, open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).
|
||||
8. Go back to the **Developer menu** and select `Reload JS`.
|
||||
|
|
|
|||
|
|
@ -1,41 +1,7 @@
|
|||
---
|
||||
id: running-on-device-ios
|
||||
title: Running On Device
|
||||
layout: docs
|
||||
category: Guides (iOS)
|
||||
layout: redirect
|
||||
permalink: docs/running-on-device-ios.html
|
||||
next: running-on-simulator-ios
|
||||
previous: linking-libraries-ios
|
||||
destinationUrl: running-on-device.html
|
||||
---
|
||||
|
||||
Running an iOS app on a device requires only an Apple ID and a Mac. This guide covers only React Native specific topics.
|
||||
|
||||
## Accessing the development server from device
|
||||
|
||||
You can iterate quickly on device using the development server. First, ensure that you are on the same Wi-Fi network as your computer.
|
||||
|
||||
In Xcode, select your phone as build target and press "Build and run"
|
||||
|
||||
> Hint
|
||||
>
|
||||
> Shake the device to open the [developer menu](/react-native/docs/debugging.html#accessing-the-in-app-developer-menu).
|
||||
|
||||
## Building your app for production
|
||||
|
||||
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.
|
||||
|
||||
Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. To do this, go to `Product -> Scheme -> Edit Scheme (cmd + <)`, make sure you're in the `Run` tab from the side, and set the Build Configuration dropdown to `release`.
|
||||
|
||||
Apps built for `Release` will automatically disable the in-app developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also load the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
|
||||
|
||||
Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.
|
||||
|
||||
### App Transport Security
|
||||
|
||||
App Transport Security is a security feature, added 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 by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the `NSAllowsArbitraryLoads` entry from your `Info.plist` file in the `ios/` folder.
|
||||
|
||||
To learn more about how to configure ATS on your own Xcode projects, see [this post on ATS][cats].
|
||||
|
||||
[cats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ layout: docs
|
|||
category: Guides (iOS)
|
||||
permalink: docs/running-on-simulator-ios.html
|
||||
next: communication-ios
|
||||
previous: running-on-device-ios
|
||||
previous: linking-libraries-ios
|
||||
---
|
||||
|
||||
## Starting the simulator
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ layout: docs
|
|||
category: Guides (Android)
|
||||
permalink: docs/signed-apk-android.html
|
||||
next: android-ui-performance
|
||||
previous: running-on-device-android
|
||||
previous: headless-js-android
|
||||
---
|
||||
|
||||
Android requires that all apps be digitally signed with a certificate before they can be installed, so to distribute your Android application via [Google Play store](https://play.google.com/store), you'll need to generate a signed release APK. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to packaging the JavaScript bundle.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Testing
|
|||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/testing.html
|
||||
next: javascript-environment
|
||||
next: running-on-device
|
||||
previous: debugging
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -28,16 +28,12 @@ On Windows you can find the process using port 8081 using [Resource Monitor](htt
|
|||
|
||||
You can configure the packager to use a port other than 8081 by using the `port` parameter:
|
||||
|
||||
`$ react-native start --port=8088`
|
||||
|
||||
You will also need to update your applications to load the JavaScript bundle from the new port.
|
||||
|
||||
To change the port used by an iOS application, edit the `AppDelegate.m` file in the `ios` folder. Scroll down to the line where the bundle location is defined, and replace 8081 with the new port.
|
||||
|
||||
```
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8088/index.ios.bundle"];
|
||||
$ react-native start --port=8088
|
||||
```
|
||||
|
||||
You will also need to update your applications to load the JavaScript bundle from the new port. Open the in-app [Developer menu](/react-native/docs/debugging.html#accessing-the-in-app-developer-menu), then go to **Dev Settings** → **Debug server host for device** and replace 8081 with your port of choice.
|
||||
|
||||
### NPM locking error
|
||||
|
||||
If you encounter an error such as "npm WARN locking Error: EACCES" while using the React Native CLI, try running the following:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule RedirectLayout
|
||||
*/
|
||||
|
||||
var React = require('React');
|
||||
|
||||
var RedirectLayout = React.createClass({
|
||||
render: function() {
|
||||
var destinationUrl = this.props.metadata.destinationUrl;
|
||||
|
||||
return (
|
||||
<html>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<link rel="canonical" href={ destinationUrl } />
|
||||
<meta httpEquiv="refresh" content={ "0; url=" + destinationUrl } />
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Redirecting...</h1>
|
||||
<a href={ destinationUrl }>Click here if you are not redirected.</a>
|
||||
<script dangerouslySetInnerHTML={{__html: `location=` + destinationUrl }} />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = RedirectLayout;
|
||||
Loading…
Reference in New Issue