Documentation updates

Summary:
Tackling a handful of docs issues:

- #12780
- #11227
- #2819
Closes https://github.com/facebook/react-native/pull/12867

Differential Revision: D4691083

Pulled By: hramos

fbshipit-source-id: 9115315f2d6132e975901c9a0b784e9d41eeb49e
This commit is contained in:
Hector Ramos 2017-03-10 12:50:20 -08:00 committed by Facebook Github Bot
parent 014eef3c74
commit 30bf039d90
5 changed files with 45 additions and 79 deletions

View File

@ -65,19 +65,25 @@ one to start with, since the setup is a bit different.
## Installing Dependencies ## Installing Dependencies
You will need Node.js, Watchman, the React Native command line interface, and Xcode. You will need Node, Watchman, the React Native command line interface, and Xcode.
<block class="mac android" /> <block class="mac android" />
## Installing Dependencies ## Installing Dependencies
You will need Node.js, Watchman, the React Native command line interface, and Android Studio. You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
<block class="windows linux android" /> <block class="linux android" />
## Installing Dependencies ## Installing Dependencies
You will need Node.js, the React Native command line interface, and Android Studio. You will need Node, the React Native command line interface, a JDK, and Android Studio.
<block class="windows android" />
## Installing Dependencies
You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.
<block class="mac ios android" /> <block class="mac ios android" />
@ -90,33 +96,41 @@ brew install node
brew install watchman brew install watchman
``` ```
> [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching If you have already installed Node on your system, make sure it is version 4 or newer.
changes in the filesystem. It is highly recommended you install it for better performance.
[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
<block class="linux android" /> <block class="linux android" />
### Node ### Node
Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node.js 4 or newer. Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 4 or newer.
<block class='windows android' /> <block class='windows android' />
### Node ### Node, Python2, JDK
We recommend installing Node.js and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run: We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
Android Studio, which we will install next, requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) which can be installed using Chocolatey.
Open a Command Prompt as Administrator, then run:
``` ```
choco install nodejs.install choco install nodejs.install
choco install python2 choco install python2
choco install jdk8
``` ```
If you have already installed Node on your system, make sure it is version 4 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.
> You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/). > You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/).
<block class="mac ios android" /> <block class="mac ios android" />
### The React Native CLI ### The React Native CLI
Node.js comes with npm, which lets you install the React Native command line interface. Node comes with npm, which lets you install the React Native command line interface.
Run the following command in a Terminal: Run the following command in a Terminal:
@ -130,7 +144,7 @@ npm install -g react-native-cli
### The React Native CLI ### The React Native CLI
Node.js comes with npm, which lets you install the React Native command line interface. Node comes with npm, which lets you install the React Native command line interface.
Run the following command in a Terminal: Run the following command in a Terminal:
@ -144,7 +158,9 @@ npm install -g react-native-cli
### Xcode ### Xcode
The easiest way to install Xcode 8 is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
If you have already installed Xcode on your system, make sure it is version 8 or higher.
You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown. You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
@ -156,13 +172,15 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho
Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps. Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
<block class="mac linux android" />
> Android Studio requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). Go ahead and install JDK 8 or newer if needed.
<block class="mac linux windows android" />
#### 1. Download and install Android Studio #### 1. Download and install Android Studio
[Android Studio](https://developer.android.com/studio/install.html) provides the Android SDK and AVD (emulator) required to run and test your React Native apps. Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps. [Download Android Studio](https://developer.android.com/studio/index.html), then follow the [installation instructions](https://developer.android.com/studio/install.html). Choose `Custom` installation when prompted by the Setup Wizard, and proceed to the next step.
<block class="mac android" />
> Android Studio requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
<block class="mac windows android" /> <block class="mac windows android" />

View File

@ -283,60 +283,6 @@ measureLayout();
Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there. Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.
### Sending Events to JavaScript
Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below.
```java
...
private void sendEvent(ReactContext reactContext,
String eventName,
@Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
...
WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);
```
JavaScript modules can then register to receive events by `addListenerOn` using the `Subscribable` mixin
```js
import { DeviceEventEmitter } from 'react-native';
...
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
componentWillMount: function() {
...
this.addListenerOn(DeviceEventEmitter,
'keyboardWillShow',
this.scrollResponderKeyboardWillShow);
...
},
scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},
```
You can also directly use the `DeviceEventEmitter` module to listen for events.
```js
...
componentWillMount: function() {
DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
// handle event.
});
}
...
```
### Getting activity result from `startActivityForResult` ### Getting activity result from `startActivityForResult`
You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor, You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor,

View File

@ -66,7 +66,7 @@ The scroll events are dispatched to the JS thread, but their receipt is not nece
### Running in development mode (`dev=true`) ### Running in development mode (`dev=true`)
JavaScript thread performance suffers greatly when running in dev mode. JavaScript thread performance suffers greatly when running in dev mode.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in [release builds](docs/running-on-device.html#building-your-app-for-production).
### Using `console.log` statements ### Using `console.log` statements
@ -80,8 +80,6 @@ Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist
Besides simplifying the API, the new list components also have significant performance enhancements, Besides simplifying the API, the new list components also have significant performance enhancements,
the main one being nearly constant memory usage for any number of rows. the main one being nearly constant memory usage for any number of rows.
TODO: Link to blog post
### JS FPS plunges when re-rendering a view that hardly changes ### JS FPS plunges when re-rendering a view that hardly changes
If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check. If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.

View File

@ -16,11 +16,15 @@ The React Native packager runs on port 8081. If another process is already using
Run the following command on a Mac to find the id for the process that is listening on port 8081: Run the following command on a Mac to find the id for the process that is listening on port 8081:
`$ sudo lsof -i :8081` ```
$ sudo lsof -i :8081
```
Then run the following to terminate the process: Then run the following to terminate the process:
`$ kill -9 <PID>` ```
$ kill -9 <PID>
```
On Windows you can find the process using port 8081 using [Resource Monitor](https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows) and stop it using Task Manager. On Windows you can find the process using port 8081 using [Resource Monitor](https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows) and stop it using Task Manager.
@ -36,7 +40,7 @@ You will also need to update your applications to load the JavaScript bundle fro
### NPM locking error ### 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: If you encounter an error such as `npm WARN locking Error: EACCES` while using the React Native CLI, try running the following:
``` ```
sudo chown -R $USER ~/.npm sudo chown -R $USER ~/.npm
@ -101,4 +105,3 @@ Issue caused by the number of directories [inotify](https://github.com/guard/lis
``` ```
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
``` ```

View File

@ -1701,7 +1701,8 @@ input#algolia-doc-search:focus {
color: rgba(0, 0, 0, 0.4); } color: rgba(0, 0, 0, 0.4); }
.home-showcase-section .showcase img { .home-showcase-section .showcase img {
width: 110px; width: 100px;
height: 100px;
border-radius: 20px; } border-radius: 20px; }
.showcaseHeader { .showcaseHeader {