Reviewed By: ericnakagawa

Differential Revision: D5020136

fbshipit-source-id: 2aa35612c35dd4b78760215d91b6d06005033238
This commit is contained in:
Eric Vicenti 2017-05-08 10:00:35 -07:00 коммит произвёл Facebook Github Bot
Родитель cf975bbd2e
Коммит 8e6bde30eb
5 изменённых файлов: 15 добавлений и 15 удалений

Просмотреть файл

@ -162,14 +162,14 @@ _animateBounceBack(duration: number): void {
## Maintaining Your RTL-ready App ## Maintaining Your RTL-ready App
Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the UIExplorer: Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:
<p align="center"> <p align="center">
<img src="/react-native/blog/img/rtl-demo-forcertl.png" width="300"> <img src="/react-native/blog/img/rtl-demo-forcertl.png" width="300">
</p> </p>
```js ```js
<UIExplorerBlock title={'Quickly Test RTL Layout'}> <RNTesterBlock title={'Quickly Test RTL Layout'}>
<View style={styles.flexDirectionRow}> <View style={styles.flexDirectionRow}>
<Text style={styles.switchRowTextView}> <Text style={styles.switchRowTextView}>
forceRTL forceRTL
@ -181,7 +181,7 @@ Even after the initial RTL-compatible app release, you will likely need to itera
value={this.state.isRTL} /> value={this.state.isRTL} />
</View> </View>
</View> </View>
</UIExplorerBlock> </RNTesterBlock>
_onDirectionChange = () => { _onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL); I18nManager.forceRTL(!this.state.isRTL);
@ -215,6 +215,6 @@ The RTL support should cover most of the UX in your app; however, there are some
In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.
## Try it Out! ## Try it Out!
Check out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/RTLExample.js) in the `UIExplorer` to understand more about RTL support, and let us know how it works for you! Check out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/RNTester/js/RTLExample.js) in the `RNTester` to understand more about RTL support, and let us know how it works for you!
Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience! Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!

Просмотреть файл

@ -348,9 +348,9 @@ the animation will always run a frame behind the gesture due to the async nature
</Animated.ScrollView> </Animated.ScrollView>
``` ```
You can see the native driver in action by running the [UIExplorer sample app](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/), You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/master/RNTester/),
then loading the Native Animated Example. then loading the Native Animated Example.
You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js) to learn how these examples were produced. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) to learn how these examples were produced.
#### Caveats #### Caveats
@ -362,10 +362,10 @@ This means it does not work with `PanResponder` but does work with things like `
### Additional examples ### Additional examples
The UIExplorer sample app has various examples of `Animated` in use: The RNTester app has various examples of `Animated` in use:
- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/js/AnimatedGratuitousApp) - [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/Examples/RNTester/js/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js) - [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/Examples/RNTester/js/NativeAnimationsExample.js)
## `LayoutAnimation` API ## `LayoutAnimation` API

Просмотреть файл

@ -11,7 +11,7 @@ previous: communication-ios
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications. Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The UIExplorer example project supports Apple TV; use the `UIExplorer-tvOS` build target to build for tvOS. The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS.
## Build changes ## Build changes

Просмотреть файл

@ -212,7 +212,7 @@ Let's look at an example.
In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent. In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.
You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m). You can checkout full source code of the exmaple [here](https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m).
It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known. It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known.

Просмотреть файл

@ -91,10 +91,10 @@ The tests themselves are written in JS, and must call `TestModule.markTestComple
See the following for example usage and integration points: See the following for example usage and integration points:
- [`IntegrationTestHarnessTest.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js) - [`IntegrationTestHarnessTest.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js)
- [`UIExplorerIntegrationTests.m`](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m) - [`RNTesterIntegrationTests.m`](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterIntegrationTests.m)
- [`IntegrationTestsApp.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js) - [`IntegrationTestsApp.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js)
You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode, or by running the following in the command line on macOS: You can run integration tests locally with cmd+U in the IntegrationTest and RNTester apps in Xcode, or by running the following in the command line on macOS:
$ cd react-native $ cd react-native
$ ./scripts/objc-test-ios.sh $ ./scripts/objc-test-ios.sh
@ -105,11 +105,11 @@ You can run integration tests locally with cmd+U in the IntegrationTest and UIEx
A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using `TestModule.verifySnapshot()`, using the [`FBSnapshotTestCase`](https://github.com/facebook/ios-snapshot-test-case) library behind the scenes. Reference images are recorded by setting `recordMode = YES` on the `RCTTestRunner`, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See [`SimpleSnapshotTest`](https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js) for a basic example. A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using `TestModule.verifySnapshot()`, using the [`FBSnapshotTestCase`](https://github.com/facebook/ios-snapshot-test-case) library behind the scenes. Reference images are recorded by setting `recordMode = YES` on the `RCTTestRunner`, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See [`SimpleSnapshotTest`](https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js) for a basic example.
If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to `_runner.recordMode = YES;` in [UIExplorer/UIExplorerSnapshotTests.m](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42), re-run the failing tests, then flip record back to `NO` and submit/update your PR and wait to see if the Travis build passes. If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to `_runner.recordMode = YES;` in [RNTester/RNTesterSnapshotTests.m](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42), re-run the failing tests, then flip record back to `NO` and submit/update your PR and wait to see if the Travis build passes.
## Apple TV ## Apple TV
The same tests discussed above for iOS will also run on tvOS. In the UIExplorer Xcode project, select the UIExplorer-tvOS target, and you can follow the same steps above to run the tests in Xcode. The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.
You can run Apple TV unit and integration tests locally by running the following in the command line on macOS: You can run Apple TV unit and integration tests locally by running the following in the command line on macOS: