mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a href="https://twitter.com/martinbigio" target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a href="https://twitter.com/martinbigio" target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</span><p>If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.</p><p><strong>Word of warning:</strong> because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.</p><p>Hot reloading is available as of 0.22, you can enable it:</p><ul><li>Open the developer menu</li><li>Tap on "Enable Hot Reloading"</li></ul><h2><a class="anchor" name="implementation-in-a-nutshell"></a>Implementation in a nutshell <a class="hash-link" href="#implementation-in-a-nutshell">#</a></h2><p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p><p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/docs/hot-module-replacement-with-webpack.html" target="_blank">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p><p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p><p><img src="/react-native/blog/img/hmr-architecture.png" alt=""></p><p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// log.js
|
||||
</span><span class="token keyword">function</span> <span class="token function">log<span class="token punctuation">(</span></span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Toward Better Documentation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Toward Better Documentation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="active" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Toward Better Documentation</h1><p class="meta">July 6, 2016 by <a href="https://twitter.com/lacker" target="_blank">Kevin Lacker</a></p><hr><div><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p><h2><a class="anchor" name="inline-examples"></a>Inline Examples <a class="hash-link" href="#inline-examples">#</a></h2><p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</p><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Toward Better Documentation – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Toward Better Documentation – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="active" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Toward Better Documentation</h1><p class="meta">July 6, 2016 by <a href="https://twitter.com/lacker" target="_blank">Kevin Lacker</a></p><hr><div><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p><h2><a class="anchor" name="inline-examples"></a>Inline Examples <a class="hash-link" href="#inline-examples">#</a></h2><p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</p><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
class <span class="token class-name">ScratchPad</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="active" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Right-to-Left Layout Support For React Native Apps</h1><p class="meta">August 19, 2016 by <a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a></p><hr><div><p>After launching an app to the app stores, internationalization is the next step to further your audience reach. Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app RTL support for them is necessary.</p><p>We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the <a href="https://github.com/facebook/react-native" target="_blank">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases" target="_blank"><code>v0.33.0-rc</code></a>.</p><p>This involved changing <a href="https://github.com/facebook/css-layout" target="_blank">css-layout</a>, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.</p><p>To battle test the RTL support in production, the latest version of the <strong>Facebook Ads Manager</strong> app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both <a href="https://itunes.apple.com/app/id964397083" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a>. Here is how it looks like in those RTL languages:</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-ama-ios-arabic.png" height="480" style="margin:25px">
|
||||
<img src="/react-native/blog/img/rtl-ama-android-hebrew.png" height="480" style="margin:25px">
|
||||
</p>
|
||||
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">css-layout</a> already has a concept of <code>start</code> and <code>end</code> for the layout. In the Left-to-Right (LTR) layout, <code>start</code> means <code>left</code>, and <code>end</code> means <code>right</code>. But in RTL, <code>start</code> means <code>right</code>, and <code>end</code> means <code>left</code>. This means we can make RN depend on the <code>start</code> and <code>end</code> calculation to compute the correct layout, which includes <code>position</code>, <code>padding</code>, and <code>margin</code>.</p><p>In addition, <a href="https://github.com/facebook/css-layout" target="_blank">css-layout</a> already makes each component's direction inherits from its parent. This means, we simply need to set the direction of the root component to RTL, and the entire app will flip.</p><p>The diagram below describes the changes at high level:</p><p><img src="/react-native/blog/img/rtl-rn-core-updates.png" alt=""></p><p>These include:
|
||||
<em> <a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">css-layout RTL support for absolute positioning</a>
|
||||
</em> mapping <code>left</code> and <code>right</code> to <code>start</code> and <code>end</code> in RN core implementation for shadow nodes
|
||||
* and exposing a <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank">bridged utility module</a> to help control the RTL layout</p><p>With this update, when you allow RTL layout for your app:</p><ul><li>every component layout will flip horizontally</li><li>some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components</li><li>minimal additional effort may be needed to make your app fully RTL-ready</li></ul><h2><a class="anchor" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></h2><ol><li><p>To support RTL, you should first add the RTL language bundles to your app.</p><ul><li>See the general guides from <a href="https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LocalizingYourApp/LocalizingYourApp.html#//apple_ref/doc/uid/10000171i-CH5-SW1" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">Android</a>.</li></ul></li><li><p>Allow RTL layout for your app by calling the <code>allowRTL()</code> function at the beginning of native code. We provided this utility to only apply to an RTL layout when your app is ready. Here is an example:</p><p>iOS:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTI18nUtil sharedInstance<span class="token punctuation">]</span> allowRTL<span class="token punctuation">:</span>YES<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Android:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in MainActivity.java
|
||||
</span> I18nUtil sharedI18nUtilInstance <span class="token operator">=</span> I18nUtil<span class="token punctuation">.</span><span class="token function">getInstance<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">setAllowRTL<span class="token punctuation">(</span></span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></li><li><p>For Android, you need add <code>android:supportsRtl="true"</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html" target="_blank"><code><application></code></a> element in <code>AndroidManifest.xml</code> file.</p></li></ol><p>Now, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically.</p><h2><a class="anchor" name="writing-rtl-ready-components"></a>Writing RTL-ready Components <a class="hash-link" href="#writing-rtl-ready-components">#</a></h2><p>In general, most components are already RTL-ready, for example:</p><ul><li><p>Left-to-Right Layout</p><span><p align="left">
|
||||
<img src="/react-native/blog/img/rtl-demo-listitem-ltr.png" width="300">
|
||||
</p>
|
||||
</span></li><li><p>Right-to-Left Layout</p><span><p align="left">
|
||||
<img src="/react-native/blog/img/rtl-demo-listitem-rtl.png" width="300">
|
||||
</p>
|
||||
|
||||
</span></li></ul><p>However, there are several cases to be aware of, for which you will need the <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank"><code>I18nManager</code></a>. In <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank"><code>I18nManager</code></a>, there is a constant <code>isRTL</code> to tell if layout of app is RTL or not, so that you can make the necessary changes according to the layout.</p><h4><a class="anchor" name="icons-with-directional-meaning"></a>Icons with Directional Meaning <a class="hash-link" href="#icons-with-directional-meaning">#</a></h4><p>If your component has icons or images, they will be displayed the same way in LTR and RTL layout, because RN will not flip your source image. Therefore, you should flip them according to the layout style.
|
||||
* Left-to-Right Layout</p><span> <p align="left">
|
||||
<img src="/react-native/blog/img/rtl-demo-icon-ltr.png" width="300">
|
||||
</p>
|
||||
|
||||
</span><ul><li><p>Right-to-Left Layout</p><span><p align="left">
|
||||
<img src="/react-native/blog/img/rtl-demo-icon-rtl.png" width="300">
|
||||
</p>
|
||||
|
||||
</span></li></ul><p>Here are two ways to flip the icon according to the direction:</p><ul><li><p>Adding a <code>transform</code> style to the image component:</p><div class="prism language-javascript"><Image
|
||||
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div></li><li><p>Or, changing the image source according to the direction:</p><div class="prism language-javascript"><span class="token keyword">let</span> imageSource <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./back.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>I18nManager<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
imageSource <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./forward.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span>imageSource<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></li></ul><h4><a class="anchor" name="gestures-and-animations"></a>Gestures and Animations <a class="hash-link" href="#gestures-and-animations">#</a></h4><p>In iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js" target="_blank"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental" target="_blank"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p><p>A good example to illustrate gesture RTL support is <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js" target="_blank"><code>SwipeableRow</code></a>.</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-demo-swipe-ltr.png" height="480" style="margin:25px">
|
||||
<img src="/react-native/blog/img/rtl-demo-swipe-rtl.png" height="480" style="margin:25px">
|
||||
</p>
|
||||
|
||||
|
||||
</span><h6><a class="anchor" name="gestures-example"></a>Gestures Example <a class="hash-link" href="#gestures-example">#</a></h6><div class="prism language-javascript"><span class="token comment" spellcheck="true">// SwipeableRow.js
|
||||
</span><span class="token function">_isSwipingExcessivelyRightFromClosedPosition<span class="token punctuation">(</span></span>gestureState<span class="token punctuation">:</span> Object<span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // ...
|
||||
</span> const gestureStateDx <span class="token operator">=</span> IS_RTL <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_isSwipingRightFromClosed<span class="token punctuation">(</span></span>gestureState<span class="token punctuation">)</span> &&
|
||||
gestureStateDx <span class="token operator">></span> RIGHT_SWIPE_THRESHOLD
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h6><a class="anchor" name="animation-example"></a>Animation Example <a class="hash-link" href="#animation-example">#</a></h6><div class="prism language-javascript"><span class="token comment" spellcheck="true">// SwipeableRow.js
|
||||
</span><span class="token function">_animateBounceBack<span class="token punctuation">(</span></span>duration<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">:</span> void <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // ...
|
||||
</span> const swipeBounceBackDistance <span class="token operator">=</span> IS_RTL <span class="token operator">?</span>
|
||||
<span class="token operator">-</span>RIGHT_SWIPE_BOUNCE_BACK_DISTANCE <span class="token punctuation">:</span>
|
||||
RIGHT_SWIPE_BOUNCE_BACK_DISTANCE<span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_animateTo<span class="token punctuation">(</span></span>
|
||||
<span class="token operator">-</span>swipeBounceBackDistance<span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_animateToClosedPositionDuringBounce<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h2><a class="anchor" name="maintaining-your-rtl-ready-app"></a>Maintaining Your RTL-ready App <a class="hash-link" href="#maintaining-your-rtl-ready-app">#</a></h2><p>Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank"><code>I18nManager</code></a> provides the <code>forceRTL()</code> 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:</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-demo-forcertl.png" width="300">
|
||||
</p>
|
||||
|
||||
</span><div class="prism language-javascript"><UIExplorerBlock title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'Quickly Test RTL Layout'</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>flexDirectionRow<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>switchRowTextView<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
forceRTL
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>switchRowSwitchView<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Switch
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onDirectionChange<span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightAlignStyle<span class="token punctuation">}</span>
|
||||
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
|
||||
_onDirectionChange <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL<span class="token punctuation">(</span></span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>isRTL<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span><span class="token string">'Reload this page'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Please reload this page to change the UI direction! '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'All examples in this app will be affected. '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span></div><p>When working on a new feature, you can easily toggle this button and reload the app to see RTL layout. The benefit is you won't need to change the language setting to test, however some text alignment won't change, as explained in the next section. Therefore, it's always a good idea to test your app in the RTL language before launching.</p><h2><a class="anchor" name="limitations-and-future-plan"></a>Limitations and Future Plan <a class="hash-link" href="#limitations-and-future-plan">#</a></h2><p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p><ul><li>Text alignment behaviors differ in iOS and Android<ul><li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li><li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li></ul></li></ul><ul><li><p>There is no "true" left/right</p><p> As discussed before, we map the <code>left</code>/<code>right</code> styles from the JS side to <code>start</code>/<code>end</code>, all <code>left</code> in code for RTL layout becomes "right" on screen, and <code>right</code> in code becomes "left" on screen. This is convenient because you don't need to change your product code too much, but it means there is no way to specify "true left" or "true right" in the code. In the future, allowing a component to control its direction regardless of the language may be necessary.</p></li><li><p>Make RTL support for gestures and animations more developer friendly</p><p> Currently, there is still some programming effort required to make gestures and animations RTL compatible.
|
||||
In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li></ul><h2><a class="anchor" name="try-it-out"></a>Try it Out! <a class="hash-link" href="#try-it-out">#</a></h2><p>Check out the <code>RTLExample</code> in the <code>UIExplorer</code> to understand more about RTL support, and let us know how it works for you!</p><p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
docsearch({
|
||||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||||
indexName: 'react-native-versions',
|
||||
inputSelector: '#algolia-doc-search',
|
||||
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
|
||||
});
|
||||
</script><script src="js/scripts.js"></script></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 475 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 444 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
+89
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user