mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-24 12:25:59 +08:00
CI now builds docs website and deploys it to /%version% path
Summary: Copy of #5760 reverted merge. We need to preserve history of docs changes on the webserver. The goal is to allow users to browse outdated versions of docs. To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut. I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it. How it works: 1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder. Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL. All relative URLs will work within that website 2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder. Github will serve this website from https://facebook.github.io/react-native/releases/v Closes https://github.com/facebook/react-native/pull/5873 Reviewed By: svcscm Differential Revision: D2926901 Pulled By: androidtrunkagent fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1 shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1
This commit is contained in:
Konstantin Raev
committed by
facebook-github-bot-0
facebook-github-bot-0
parent
0b89b18b1b
commit
6f1417c849
@@ -43,7 +43,7 @@ Once the trace starts collecting, perform the animation or interaction you care
|
||||
|
||||
After opening the trace in your browser (preferably Chrome), you should see something like this:
|
||||
|
||||
|
||||
|
||||
|
||||
**HINT**: Use the WASD keys to strafe and zoom
|
||||
|
||||
@@ -51,7 +51,7 @@ After opening the trace in your browser (preferably Chrome), you should see some
|
||||
|
||||
The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:
|
||||
|
||||
|
||||
|
||||
|
||||
You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
|
||||
|
||||
@@ -65,43 +65,43 @@ On the left side, you'll see a set of threads which correspond to the timeline r
|
||||
|
||||
This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with `Choreographer`, `traversals`, and `DispatchUI`:
|
||||
|
||||
|
||||
|
||||
|
||||
### JS Thread
|
||||
|
||||
This is where JS is executed. The thread name will be either `mqt_js` or `<...>` depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like `JSCall`, `Bridge.executeJSCall`, etc:
|
||||
|
||||
|
||||
|
||||
|
||||
### Native Modules Thread
|
||||
|
||||
This is where native module calls (e.g. the `UIManager`) are executed. The thread name will be either `mqt_native_modules` or `<...>`. To identify it in the latter case, look for things like `NativeCall`, `callJavaModuleMethod`, and `onBatchComplete`:
|
||||
|
||||
|
||||
|
||||
|
||||
### Bonus: Render Thread
|
||||
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either `RenderThread` or `<...>`. To identify it in the latter case, look for things like `DrawFrame` and `queueBuffer`:
|
||||
|
||||
|
||||
|
||||
|
||||
## Identifying a culprit
|
||||
|
||||
A smooth animation should look something like the following:
|
||||
|
||||
|
||||
|
||||
|
||||
Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.
|
||||
|
||||
If you noticed chop, however, you might see something like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, **the problem lies in JS**.
|
||||
|
||||
You might also see something like this:
|
||||
|
||||
|
||||
|
||||
|
||||
In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, **the problem lies in the native views being rendered**.
|
||||
|
||||
@@ -111,7 +111,7 @@ At this point, you'll have some very helpful information to inform your next ste
|
||||
|
||||
If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see `RCTEventEmitter` being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:
|
||||
|
||||
|
||||
|
||||
|
||||
This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate).
|
||||
|
||||
@@ -128,7 +128,7 @@ If you identified a native UI problem, there are usually two scenarios:
|
||||
|
||||
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Notice the long amount of time spent in `DrawFrame` that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.
|
||||
|
||||
@@ -143,7 +143,7 @@ If these don't help and you want to dig deeper into what the GPU is actually doi
|
||||
|
||||
In the second scenario, you'll see something more like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
|
||||
|
||||
|
||||
@@ -267,7 +267,7 @@ it provides much less control than `Animated` and other animation libraries, so
|
||||
you may need to use another approach if you can't get `LayoutAnimation` to do
|
||||
what you want.
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var App = React.createClass({
|
||||
@@ -376,7 +376,7 @@ var App = React.createClass({
|
||||
```
|
||||
[Run this example](https://rnplay.org/apps/4FUQ-A)
|
||||
|
||||
|
||||
|
||||
|
||||
Here we animated the opacity, but as you might guess, we can animate any
|
||||
numeric value. Read more about react-tween-state in its
|
||||
@@ -395,7 +395,7 @@ value and end value. Rebound [is used
|
||||
internally](https://github.com/facebook/react-native/search?utf8=%E2%9C%93&q=rebound)
|
||||
by React Native on `Navigator` and `WarningBox`.
|
||||
|
||||
|
||||
|
||||
|
||||
Notice that Rebound animations can be interrupted - if you release in
|
||||
the middle of a press, it will animate back from the current state to
|
||||
@@ -440,7 +440,7 @@ var App = React.createClass({
|
||||
transform: [{scaleX: this.state.scale}, {scaleY: this.state.scale}],
|
||||
};
|
||||
|
||||
var imageUri = "https://facebook.github.io/react-native/img/ReboundExample.png";
|
||||
var imageUri = "img/ReboundExample.png";
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
@@ -461,13 +461,13 @@ oscillate around the end value. In the above example, we would add
|
||||
See the below gif for an example of where in your interface you might
|
||||
use this.
|
||||
|
||||
 Screenshot from
|
||||
 Screenshot from
|
||||
[react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view).
|
||||
You can run a similar example [here](https://rnplay.org/apps/qHU_5w).
|
||||
|
||||
#### A sidenote about setNativeProps
|
||||
|
||||
As mentioned [in the Direction Manipulation section](/react-native/docs/direct-manipulation.html),
|
||||
As mentioned [in the Direction Manipulation section](docs/direct-manipulation.html),
|
||||
`setNativeProps` allows us to modify properties of native-backed
|
||||
components (components that are actually backed by native views, unlike
|
||||
composite components) directly, without having to `setState` and
|
||||
@@ -497,7 +497,7 @@ render: function() {
|
||||
<View style={styles.container}>
|
||||
<TouchableWithoutFeedback onPressIn={this._onPressIn} onPressOut={this._onPressOut}>
|
||||
<Image ref={component => this._photo = component}
|
||||
source={{uri: "https://facebook.github.io/react-native/img/ReboundExample.png"}}
|
||||
source={{uri: "img/ReboundExample.png"}}
|
||||
style={{width: 250, height: 200}} />
|
||||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
@@ -516,14 +516,14 @@ frames per second), look into using `setNativeProps` or
|
||||
`shouldComponentUpdate` to optimize them. You may also want to defer any
|
||||
computationally intensive work until after animations are complete,
|
||||
using the
|
||||
[InteractionManager](/react-native/docs/interactionmanager.html). You
|
||||
[InteractionManager](docs/interactionmanager.html). You
|
||||
can monitor the frame rate by using the In-App Developer Menu "FPS
|
||||
Monitor" tool.
|
||||
|
||||
### Navigator Scene Transitions
|
||||
|
||||
As mentioned in the [Navigator
|
||||
Comparison](https://facebook.github.io/react-native/docs/navigator-comparison.html#content),
|
||||
Comparison](docs/navigator-comparison.html#content),
|
||||
`Navigator` is implemented in JavaScript and `NavigatorIOS` is a wrapper
|
||||
around native functionality provided by `UINavigationController`, so
|
||||
these scene transitions apply only to `Navigator`. In order to re-create
|
||||
|
||||
@@ -7,7 +7,7 @@ permalink: docs/communication-ios.html
|
||||
next: native-modules-android
|
||||
---
|
||||
|
||||
In [Integrating with Existing Apps guide](http://facebook.github.io/react-native/docs/embedded-app-ios.html) and [Native UI Components guide](https://facebook.github.io/react-native/docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
|
||||
In [Integrating with Existing Apps guide](docs/embedded-app-ios.html) and [Native UI Components guide](docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
|
||||
|
||||
## Introduction
|
||||
|
||||
@@ -80,13 +80,13 @@ There is no way to update only a few properties at a time. We suggest that you b
|
||||
> Currently, JS functions `componentWillReceiveProps` and `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentWillMount` function.
|
||||
|
||||
### Passing properties from React Native to native
|
||||
The problem exposing properties of native components is covered in detail in [this article](https://facebook.github.io/react-native/docs/native-components-ios.html#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.
|
||||
The problem exposing properties of native components is covered in detail in [this article](docs/native-components-ios.html#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.
|
||||
|
||||
### Limits of properties
|
||||
|
||||
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
|
||||
|
||||
Although we have a flavor of cross-language callbacks ([described here](https://facebook.github.io/react-native/docs/native-modules-ios.html#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
|
||||
Although we have a flavor of cross-language callbacks ([described here](docs/native-modules-ios.html#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
|
||||
|
||||
## Other ways of cross-language interaction (events and native modules)
|
||||
|
||||
@@ -96,7 +96,7 @@ React Native enables you to perform cross-language function calls. You can execu
|
||||
|
||||
### Calling React Native functions from native (events)
|
||||
|
||||
Events are described in detail in [this article](http://facebook.github.io/react-native/docs/native-components-ios.html#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
|
||||
Events are described in detail in [this article](docs/native-components-ios.html#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
|
||||
|
||||
Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
|
||||
|
||||
@@ -108,7 +108,7 @@ The common pattern we use when embedding native in React Native is to make the n
|
||||
|
||||
### Calling native functions from React Native (native modules)
|
||||
|
||||
Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](https://facebook.github.io/react-native/docs/native-modules-ios.html#content).
|
||||
Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](docs/native-modules-ios.html#content).
|
||||
|
||||
The fact that native modules are singletons limits the mechanism in context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.
|
||||
|
||||
@@ -125,7 +125,7 @@ When integrating native and React Native, we also need a way to consolidate two
|
||||
|
||||
### Layout of a native component embedded in React Native
|
||||
|
||||
This case is covered in [this article](https://facebook.github.io/react-native/docs/native-components-ios.html#styles). Basically, as all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box.
|
||||
This case is covered in [this article](docs/native-components-ios.html#styles). Basically, as all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box.
|
||||
|
||||
### Layout of a React Native component embedded in native
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ React Native Android use [gradle](https://docs.gradle.org) as a build system. We
|
||||
* Android Support Repository
|
||||
2. Click "Install Packages"
|
||||
|
||||
 
|
||||
 
|
||||
|
||||
### Install Genymotion
|
||||
|
||||
@@ -75,7 +75,7 @@ Genymotion is much easier to set up than stock Google emulators. However, it's o
|
||||
3. [Configure hardware acceleration (HAXM)](http://developer.android.com/tools/devices/emulator.html#vm-mac), otherwise the emulator is going to be slow.
|
||||
4. Create an Android Virtual Device (AVD):
|
||||
1. Run `android avd` and click on **Create...**
|
||||
|
||||
|
||||
2. With the new AVD selected, click `Start...`
|
||||
5. To bring up the developer menu press F2 (or install [Frappé](http://getfrappe.com))
|
||||
|
||||
|
||||
@@ -156,7 +156,7 @@ view using `{...this.props}`. The reason for this is that
|
||||
`TouchableOpacity` is actually a composite component, and so in addition
|
||||
to depending on `setNativeProps` on its child, it also requires that the
|
||||
child perform touch handling. To do this, it passes on [various
|
||||
props](https://facebook.github.io/react-native/docs/view.html#onmoveshouldsetresponder)
|
||||
props](docs/view.html#onmoveshouldsetresponder)
|
||||
that call back to the `TouchableOpacity` component.
|
||||
`TouchableHighlight`, in contrast, is backed by a native view and only
|
||||
requires that we implement `setNativeProps`.
|
||||
|
||||
@@ -166,7 +166,7 @@ To run your app, you need to first start the development server. To do this, sim
|
||||
|
||||
Now build and run your Android app as normal (e.g. `./gradlew installDebug`). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
|
||||
|
||||
|
||||
|
||||
|
||||
## Sharing a ReactInstance across multiple Activities / Fragments in your app
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
|
||||
|
||||
You should now add a container view for the React Native component. It can be any `UIView` in your app.
|
||||
|
||||
|
||||
|
||||
|
||||
However, let's subclass `UIView` for the sake of clean code. Let's name it `ReactView`. Open up `Yourproject.xcworkspace` and create a new class `ReactView` (You can name it whatever you like :)).
|
||||
|
||||
@@ -186,7 +186,7 @@ If you don't do this, you will see the error - `Could not connect to development
|
||||
|
||||
Now compile and run your app. You shall now see your React Native app running inside of the `ReactView`.
|
||||
|
||||
|
||||
|
||||
|
||||
Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -> Preprocessor Macros). You've got a simple React component totally encapsulated behind an Objective-C `UIView` subclass.
|
||||
|
||||
|
||||
@@ -68,4 +68,4 @@ However, sometimes a parent will want to make sure that it becomes responder. Th
|
||||
|
||||
### PanResponder
|
||||
|
||||
For higher-level gesture interpretation, check out [PanResponder](/react-native/docs/panresponder.html).
|
||||
For higher-level gesture interpretation, check out [PanResponder](docs/panresponder.html).
|
||||
|
||||
@@ -27,7 +27,7 @@ We recommend periodically running `brew update && brew upgrade` to keep your pro
|
||||
|
||||
To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See [Android setup guide](android-setup.html) for instructions on how to set up your Android environment.
|
||||
|
||||
_NOTE:_ There is experimental [Windows and Linux support](/react-native/docs/linux-windows-support.html) for Android development.
|
||||
_NOTE:_ There is experimental [Windows and Linux support](docs/linux-windows-support.html) for Android development.
|
||||
|
||||
## Quick start
|
||||
|
||||
@@ -41,7 +41,7 @@ _NOTE:_ There is experimental [Windows and Linux support](/react-native/docs/lin
|
||||
- Open `index.ios.js` in your text editor of choice and edit some lines.
|
||||
- Hit ⌘-R in your iOS simulator to reload the app and see your change!
|
||||
|
||||
_Note: If you are using an iOS device, see the [Running on iOS Device page](http://facebook.github.io/react-native/docs/running-on-device-ios.html#content)._
|
||||
_Note: If you are using an iOS device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content)._
|
||||
|
||||
**To run the Android app:**
|
||||
|
||||
@@ -51,11 +51,11 @@ _Note: If you are using an iOS device, see the [Running on iOS Device page](http
|
||||
- Press the menu button (F2 by default, or ⌘-M in Genymotion) and select *Reload JS* to see your change!
|
||||
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
||||
|
||||
_Note: If you are using an Android device, see the [Running on Android Device page](http://facebook.github.io/react-native/docs/running-on-device-android.html#content)._
|
||||
_Note: If you are using an Android device, see the [Running on Android Device page](docs/running-on-device-android.html#content)._
|
||||
|
||||
Congratulations! You've successfully run and modified your first React Native app.
|
||||
|
||||
_If you run into any issues getting started, see the [troubleshooting page](/react-native/docs/troubleshooting.html#content)._
|
||||
_If you run into any issues getting started, see the [troubleshooting page](docs/troubleshooting.html#content)._
|
||||
|
||||
## Adding Android to an existing React Native project
|
||||
|
||||
|
||||
@@ -90,7 +90,7 @@ Many of the images you will display in your app will not be available at compile
|
||||
|
||||
## Local Filesystem Images
|
||||
|
||||
See [CameraRoll](/react-native/docs/cameraroll.html) for an example of
|
||||
See [CameraRoll](docs/cameraroll.html) for an example of
|
||||
using local resources that are outside of `Images.xcassets`.
|
||||
|
||||
### Best Camera Roll Image
|
||||
|
||||
@@ -38,7 +38,7 @@ PushNotificationIOS
|
||||
|
||||
### Some props are only supported on one platform
|
||||
|
||||
There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with `@platform` in JS docs and have a small badge next to them on the website. See e.g. [Image](https://facebook.github.io/react-native/docs/image.html).
|
||||
There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with `@platform` in JS docs and have a small badge next to them on the website. See e.g. [Image](docs/image.html).
|
||||
|
||||
### Platform parity
|
||||
|
||||
@@ -62,7 +62,7 @@ Another issue with `overflow: 'hidden'` on Android: a view is not clipped by the
|
||||
|
||||
### View shadows
|
||||
|
||||
The `shadow*` [view styles](/react-native/docs/view.html#style) apply on iOS, and the `elevation` view prop is available on Android. Setting `elevation` on Android is equivalent to using the [native elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation), and has the same limitations (most significantly, it only works on Android 5.0+). Setting `elevation` on Android also affects the z-order for overlapping views.
|
||||
The `shadow*` [view styles](docs/view.html#style) apply on iOS, and the `elevation` view prop is available on Android. Setting `elevation` on Android is equivalent to using the [native elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation), and has the same limitations (most significantly, it only works on Android 5.0+). Setting `elevation` on Android also affects the z-order for overlapping views.
|
||||
|
||||
### Android M permissions
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ folder.
|
||||
Drag this file to your project on Xcode (usually under the `Libraries` group
|
||||
on Xcode);
|
||||
|
||||
|
||||
|
||||
|
||||
#### Step 2
|
||||
|
||||
@@ -73,7 +73,7 @@ Click on your main project file (the one that represents the `.xcodeproj`)
|
||||
select `Build Phases` and drag the static library from the `Products` folder
|
||||
inside the Library you are importing to `Link Binary With Libraries`
|
||||
|
||||
|
||||
|
||||
|
||||
#### Step 3
|
||||
|
||||
@@ -97,4 +97,4 @@ Paths`. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it `recursive`, like `React` on the
|
||||
example).
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@ permalink: docs/navigator-comparison.html
|
||||
next: known-issues
|
||||
---
|
||||
|
||||
The differences between [Navigator](/react-native/docs/navigator.html)
|
||||
and [NavigatorIOS](/react-native/docs/navigatorios.html) are a common
|
||||
The differences between [Navigator](docs/navigator.html)
|
||||
and [NavigatorIOS](docs/navigatorios.html) are a common
|
||||
source of confusion for newcomers.
|
||||
|
||||
Both `Navigator` and `NavigatorIOS` are components that allow you to
|
||||
|
||||
@@ -72,7 +72,7 @@ out of the box than `Navigator`. The reason for this is that the
|
||||
animations for the transitions are done entirely on the main thread, and
|
||||
so they are not interrupted by frame drops on the JavaScript thread.
|
||||
([Read about why you should probably use Navigator
|
||||
anyways.](/react-native/docs/navigator-comparison.html))
|
||||
anyways.](docs/navigator-comparison.html))
|
||||
|
||||
Similarly, you can happily scroll up and down through a ScrollView when
|
||||
the JavaScript thread is locked up because the ScrollView lives on the
|
||||
|
||||
@@ -31,7 +31,7 @@ When you run your app on device, we pack all the JavaScript code and the images
|
||||
|
||||
## Disabling in-app developer menu
|
||||
|
||||
When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](/react-native/docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu.
|
||||
When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ If you need to change the way the JavaScript bundle and/or drawable resources ar
|
||||
|
||||
#### If you *don't* have a `react.gradle` file:
|
||||
|
||||
You can [upgrade](/react-native/docs/upgrading.html) to the latest version of React Native to get this file. Alternatively, you can bundle the JavaScript package and drawable resources manually by doing the following in a terminal:
|
||||
You can [upgrade](docs/upgrading.html) to the latest version of React Native to get this file. Alternatively, you can bundle the JavaScript package and drawable resources manually by doing the following in a terminal:
|
||||
|
||||
```sh
|
||||
$ mkdir -p android/app/src/main/assets
|
||||
|
||||
@@ -33,7 +33,7 @@ var styles = StyleSheet.create({
|
||||
|
||||
`StyleSheet.create` construct is optional but provides some key advantages. It ensures that the values are **immutable** and **opaque** by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render.
|
||||
|
||||
All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](/react-native/docs/flexbox.html).
|
||||
All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](docs/flexbox.html).
|
||||
|
||||
## Using Styles
|
||||
|
||||
@@ -95,8 +95,8 @@ var List = React.createClass({
|
||||
|
||||
You can checkout latest support of CSS Properties in following Links.
|
||||
|
||||
- [View Properties](/react-native/docs/view.html#style)
|
||||
- [Image Properties](/react-native/docs/image.html#style)
|
||||
- [Text Properties](/react-native/docs/text.html#style)
|
||||
- [Flex Properties](/react-native/docs/flexbox.html#content)
|
||||
- [Transform Properties](/react-native/docs/transforms.html#content)
|
||||
- [View Properties](docs/view.html#style)
|
||||
- [Image Properties](docs/image.html#style)
|
||||
- [Text Properties](docs/text.html#style)
|
||||
- [Flex Properties](docs/flexbox.html#content)
|
||||
- [Transform Properties](docs/transforms.html#content)
|
||||
|
||||
@@ -78,7 +78,7 @@ pod 'React', :path => '../node_modules/react-native', :subspecs => [
|
||||
```
|
||||
Next, make sure you have run `pod install` and that a `Pods/` directory has been created in your project with React installed. CocoaPods will instruct you to use the generated `.xcworkspace` file henceforth to be able to use these installed dependencies.
|
||||
|
||||
If you are adding React manually, make sure you have included all the relevant dependencies, like `RCTText.xcodeproj`, `RCTImage.xcodeproj` depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the `Linked Frameworks and Binaries` section in the Xcode project settings. More detailed steps are here: [Linking Libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).
|
||||
If you are adding React manually, make sure you have included all the relevant dependencies, like `RCTText.xcodeproj`, `RCTImage.xcodeproj` depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the `Linked Frameworks and Binaries` section in the Xcode project settings. More detailed steps are here: [Linking Libraries](docs/linking-libraries-ios.html#content).
|
||||
|
||||
##### Argument list too long: recursive header expansion failed
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ We assume you have experience writing applications with React. If not, you can l
|
||||
|
||||
## Setup
|
||||
|
||||
React Native requires the basic setup explained at [React Native Getting Started](https://facebook.github.io/react-native/docs/getting-started.html#content).
|
||||
React Native requires the basic setup explained at [React Native Getting Started](docs/getting-started.html#content).
|
||||
|
||||
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
|
||||
|
||||
@@ -111,8 +111,8 @@ And lastly we need to apply this style to the Image component:
|
||||
Press `⌘+R` / `Reload JS` and the image should now render.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialMock.png" />
|
||||
<img src="/react-native/img/TutorialMock2.png" />
|
||||
<img src="img/TutorialMock.png" />
|
||||
<img src="img/TutorialMock2.png" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -189,8 +189,8 @@ Styling the text is pretty straightforward:
|
||||
Go ahead and press `⌘+R` / `Reload JS` and you'll see the updated view.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialStyledMock.png" />
|
||||
<img src="/react-native/img/TutorialStyledMock2.png" />
|
||||
<img src="img/TutorialStyledMock.png" />
|
||||
<img src="img/TutorialStyledMock2.png" />
|
||||
</div>
|
||||
|
||||
### Fetching real data
|
||||
@@ -282,8 +282,8 @@ Now modify the render function to render a loading view if we don't have any mov
|
||||
Now press `⌘+R` / `Reload JS` and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialSingleFetched.png" />
|
||||
<img src="/react-native/img/TutorialSingleFetched2.png" />
|
||||
<img src="img/TutorialSingleFetched.png" />
|
||||
<img src="img/TutorialSingleFetched2.png" />
|
||||
</div>
|
||||
|
||||
## ListView
|
||||
@@ -367,8 +367,8 @@ Finally, we add styles for the `ListView` component to the `styles` JS object:
|
||||
And here's the final result:
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="/react-native/img/TutorialFinal.png" />
|
||||
<img src="/react-native/img/TutorialFinal2.png" />
|
||||
<img src="img/TutorialFinal.png" />
|
||||
<img src="img/TutorialFinal2.png" />
|
||||
</div>
|
||||
|
||||
There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the [Movies Example](https://github.com/facebook/react-native/tree/master/Examples/Movies) to see it all working.
|
||||
|
||||
@@ -50,7 +50,7 @@ Xcode project format is pretty complex and sometimes it's tricky to upgrade and
|
||||
|
||||
### From 0.13 to 0.14
|
||||
|
||||
The major change in this version happened to the CLI ([see changelog](https://github.com/facebook/react-native/releases/tag/v0.14.0-rc)) and static images ([see docs](http://facebook.github.io/react-native/docs/images.html)). To use the new asset system in existing Xcode project, do the following:
|
||||
The major change in this version happened to the CLI ([see changelog](https://github.com/facebook/react-native/releases/tag/v0.14.0-rc)) and static images ([see docs](docs/images.html)). To use the new asset system in existing Xcode project, do the following:
|
||||
|
||||
Add new "Run Script" step to your project's build phases:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user