zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-12 05:53:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a439ecd07d014b78c6270b96220a8b6db0a7a4f1
react-native-web/canary/docs/localization/index.html
T
Nicolas Gallagher a439ecd07d Deploy documentation
2021-02-02 18:06:34 -08:00

3 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Localization</title><meta name="description" content=""><link rel="icon" href="/static/logo.svg"><style>:root{--docs-spacing-1:0.25rem;--docs-spacing-2:0.5rem;--docs-spacing-3:0.75rem;--docs-spacing-4:1rem;--docs-spacing-5:1.25rem;--docs-spacing-6:1.5rem;--docs-spacing-8:2rem;--docs-spacing-10:2.5rem;--docs-spacing-12:3rem;--docs-spacing-16:4rem;--docs-spacing-20:5rem;--docs-spacing-40:10rem;--docs-spacing-60:15rem;--docs-spacing-64:16rem;--docs-spacing-72:18rem;--docs-spacing-80:20rem;--docs-font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--docs-font-size:14px;--docs-heading-size:2em;--docs-line-height:1.5;--docs-ring-inset:var(--tw-empty,/*!*/ /*!*/);--docs-ring-offset-width:0px}@media (min-width:1088px){:root{--docs-font-size:16px;--docs-heading-size:2.25em}}@media all{:root{--docs-bg-color:#fff;--docs-border-color:#e5e5e5;--docs-border-color-faint:#e5e5e5;--docs-text-color:#333;--docs-text-color-faint:#6b7280;--docs-heading-color:#111;--docs-link-color:#1977f2;--docs-code-color:#111;--docs-callout-bg-color:#fff3cd;--docs-callout-border-color:#ffd402;--docs-theme-color:#1977f2;--docs-theme-color-faint:#1977f250;--docs-theme-color-faded:#1977f20f;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}@media (prefers-color-scheme:dark){:root{--docs-bg-color:#15202b;--docs-border-color:#26395a;--docs-border-color-faint:#26395a;--docs-text-color:#eee;--docs-text-color-faint:#aaa;--docs-heading-color:#fff;--docs-link-color:#6b94f3;--docs-code-color:#fff;--docs-callout-bg-color:#231f00;--docs-ring-color:rgba(59, 130, 246, 0.5);--docs-ring-offset-color:#fff;--docs-ring-offset-shadow:0 0 #0000;--docs-ring-shadow:0 0 #0000;--docs-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}}html{font:var(--docs-font-size)/var(--docs-line-height) var(--docs-font-family)}body{background-color:var(--docs-bg-color, transparent);color:var(--docs-text-color, #333);margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}hr{box-sizing:content-box;height:0}img{border-style:none}iframe,img,svg,video{display:block}img,video{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{border-collapse:collapse}:not(:focus-visible){outline-width:0}.markdown a,a{color:var(--docs-link-color);text-decoration:underline}h1,h2,h3,h4,h5,h6{color:var(--docs-heading-color)}.text,.view{background-color:transparent;border:0 solid #000;box-sizing:border-box;margin:0;padding:0;text-decoration:none}.text{color:var(--docs-text-color);display:inline;font-family:var(--docs-font-family);white-space:pre-wrap;word-wrap:break-word}.view{align-items:stretch;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:relative;z-index:0}.emoji{height:1.2em;margin:0 .075em!important;display:inline-block}.container{max-width:760px}.navigation{left:auto;right:100%}.before-middot::before{display:inline-block;content:"";width:3px;height:3px;background-color:currentColor;border-radius:9999px;margin:0 7px 0 -10px;vertical-align:middle}.prop{margin-top:var(--docs-spacing-5);margin-bottom:var(--docs-spacing-5)}.prop p{margin:0!important}.callout{background-color:var(--docs-callout-bg-color);border-bottom-right-radius:.5rem;border-top-right-radius:.5rem;border-left:3px solid var(--docs-callout-border-color);margin:var(--docs-spacing-12) 0 var(--docs-spacing-4);padding:var(--docs-spacing-2) var(--docs-spacing-8)}.markdown{line-height:1.75;font-size:1.125rem;word-wrap:break-word}.markdown h1{font-weight:800;font-size:var(--docs-heading-size);margin:0 0 var(--docs-spacing-8);line-height:1.1}.markdown h2{font-weight:700;font-size:1.5em;margin:var(--docs-spacing-12) 0 var(--docs-spacing-6);line-height:1.3}.markdown h2+*,.markdown hr+*{margin-top:0}.markdown h3{font-weight:600;margin:var(--docs-spacing-8) 0 var(--docs-spacing-3)}.markdown h2,.markdown h3,.markdown h4{scroll-margin-top:1em}.markdown h1:hover .header-anchor,.markdown h2:hover .header-anchor,.markdown h3:hover .header-anchor{opacity:1}.markdown .header-anchor{opacity:0;text-decoration:none}.markdown .lead,.markdown h3{font-size:1.25em;line-height:1.5}.markdown hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid var(--docs-border-color-faint);margin:var(--docs-spacing-12) 0}.markdown table{border-collapse:collapse;text-indent:0;border-color:inherit;width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7}.markdown thead{font-weight:600;border-bottom:1px solid var(--docs-border-color)}.markdown thead th{vertical-align:bottom;padding:0 .5em .5em}.markdown tbody td:first-child,.markdown thead th:first-child{padding-left:0}.markdown tbody tr{border-bottom:1px solid var(--docs-border-color-faint)}.markdown tbody td{vertical-align:top;padding:.5em}.markdown code{color:var(--docs-code-color);font-weight:600;font-size:.875em}.markdown p,.markdown ul{margin:1.25em 0}.markdown ol{padding:0;margin:1.25em 0 1.25em 1em}.markdown ul{padding:0;list-style:none}.markdown li{margin:.5em 0}.markdown ul>li{position:relative;padding-left:1.75em}.markdown ul>li::before{content:"";position:absolute;background-color:currentColor;border-radius:50%;width:.375em;height:.375em;top:calc(.875em - .1875em);left:.25em}.markdown pre{max-width:100%;color:#000;tab-size:2;overflow-x:auto;font-size:1em;line-height:1.7;margin:1.5em 0;border-radius:.375rem;padding:.85em 1.15em}.markdown blockquote{font-weight:500;font-style:italic;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.border{border-width:1px;border-style:solid}.border-none{border:0}.border-top{border-top-width:1px;border-top-style:solid}.border-right{border-right-width:1px;border-right-style:solid}.border-left{border-left-width:1px;border-left-style:solid}.border-bottom{border-bottom-width:1px;border-bottom-style:solid}.border-left-3{border-width:3px}.block{display:block}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.rounded{border-radius:var(--docs-spacing-1, 0.25rem)}.rounded-full{border-radius:9999px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-mono{font-family:monospace,monospace;font-size:1em}.font-semibold{font-weight:600}.h-12{height:var(--docs-spacing-12)}.h-full{height:100%}.h-screen{height:100vh}.list-none{list-style:none}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:var(--docs-spacing-2);margin-bottom:var(--docs-spacing-2)}.my-8{margin-top:var(--docs-spacing-8);margin-bottom:var(--docs-spacing-8)}.ml-2{margin-left:var(--docs-spacing-2)}.mt-2{margin-top:var(--docs-spacing-2)}.mt-4{margin-top:var(--docs-spacing-4)}.mt-6{margin-top:var(--docs-spacing-6)}.mt-12{margin-top:var(--docs-spacing-12)}.mr-2{margin-right:var(--docs-spacing-2)}.mr-4{margin-right:var(--docs-spacing-4)}.mb-2{margin-bottom:var(--docs-spacing-2)}.mb-4{margin-bottom:var(--docs-spacing-4)}.mb-8{margin-bottom:var(--docs-spacing-8)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.p-6{padding:var(--docs-spacing-6)}.px-1{padding-left:var(--docs-spacing-1);padding-right:var(--docs-spacing-1)}.px-3{padding-left:var(--docs-spacing-3);padding-right:var(--docs-spacing-3)}.px-4{padding-left:var(--docs-spacing-4);padding-right:var(--docs-spacing-4)}.px-6{padding-left:var(--docs-spacing-6);padding-right:var(--docs-spacing-6)}.py-1{padding-top:var(--docs-spacing-1);padding-bottom:var(--docs-spacing-1)}.py-2{padding-top:var(--docs-spacing-2);padding-bottom:var(--docs-spacing-2)}.py-3{padding-top:var(--docs-spacing-3);padding-bottom:var(--docs-spacing-3)}.py-4{padding-top:var(--docs-spacing-4);padding-bottom:var(--docs-spacing-4)}.pl-5{padding-left:var(--docs-spacing-5)}.pt-1{padding-top:var(--docs-spacing-1)}.pt-8{padding-top:var(--docs-spacing-8)}.pt-12{padding-top:var(--docs-spacing-12)}.pb-1{padding-bottom:var(--docs-spacing-1)}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.fixed{position:fixed}.overflow-ellipsis{overflow:hidden;text-overflow:ellipsis}.text-uppercase{text-transform:uppercase}.text-sm,.text-xl{font-size:.875rem;line-height:1.25}.text-xl{font-size:1.25rem}.text-2xl,.text-3xl{font-size:2rem;line-height:1.25}.text-3xl{font-size:3rem}.w-auto{width:auto}.w-40{width:var(--docs-spacing-40)}.w-72{width:var(--docs-spacing-72)}.w-full{width:100%}.whitespace-nowrap{white-space:nowrap}.z-10{z-index:10}.z-20{z-index:20}.fill-current{fill:currentColor}.inset-y-0{top:0;bottom:0}.no-underline{text-decoration:none}.ring-opacity-50{--docs-ring-opacity:0.5}.bg-theme{background-color:var(--docs-bg-color)}.border-color-faint{border-color:var(--docs-border-color-faint)}.border-theme-faint{border-color:var(--docs-theme-color-faint)}.text-color{color:var(--docs-text-color)}.text-color-faint{color:var(--docs-text-color-faint)}.text-white{--docs-text-opacity:1;color:rgba(255,255,255,var(--docs-text-opacity))}.hover\:opacity-100:hover{opacity:1}.hover\:text-color-inherit:hover{color:inherit}@media (min-width:1088px){.container{max-width:1400px}.navigation{right:auto}.wide\:block{display:block}.wide\:flex{display:flex}.wide\:hidden{display:none}.wide\:flex-row{flex-direction:row}.wide\:sticky{position:sticky}.wide\:opacity-0{opacity:0}.wide\:opacity-1{opacity:1}.wide\:left-0{left:0}.wide\:right-0{right:0}.wide\:top-16{top:var(--docs-spacing-16)}.wide\:px-20{padding-left:var(--docs-spacing-20);padding-right:var(--docs-spacing-20)}.wide\:px-40{padding-left:var(--docs-spacing-40);padding-right:var(--docs-spacing-40)}}</style><link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://unpkg.com/prismjs@1.20.0/themes/prism.css"><link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css"><script defer="defer">function setupNavigationDrawer(){const t=document.getElementById("navigation"),n=document.getElementById("close-nav"),e=document.getElementById("show-nav");let o=!1;function i(){t.classList.add("opacity-0"),n.classList.add("hidden"),t.style.right=null,e.classList.remove("hidden"),o=!1}null!=n&&null!=e&&null!=t&&(e.addEventListener("click",function(){t.classList.remove("opacity-0"),t.style.right="auto",e.classList.add("hidden"),n.classList.remove("hidden"),o=!0}),document.addEventListener("click",n=>{!o||t.contains(n.target)||e.contains(n.target)||i()}),document.addEventListener("keydown",t=>{o&&"Escape"===t.key&&i()}))}function setupNavigationScroll(){const t=document.getElementById("navigation-scroller");if(null==t)return;window.addEventListener("unload",function(){const n=t.scrollTop;localStorage.setItem("navScrollPosition",n)});const n=localStorage.getItem("navScrollPosition");null!=n&&(t.scrollTop=n)}document.addEventListener("DOMContentLoaded",function(){setupNavigationDrawer(),setupNavigationScroll()});</script></head><body><div id="app" class="container mx-auto"><div class="view"><div class="view fixed wide:hidden z-20" style="right:30px; bottom:30px;"><button id="show-nav" aria-label="Show navigation" class="view appearance-none rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:5px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" fill="currentColor" class="w-full fill-current"><path d="M367.6 192.9c-3.8-1.3-7.7-2.5-11.7-3.7.7-2.7 1.3-5.4 1.8-8 8.9-43.2 3.1-78-16.8-89.4-19-11-50.2.5-81.6 27.8-3 2.6-6.1 5.4-9.1 8.3-2-1.9-4-3.8-6-5.6-33-29.3-66-41.6-85.8-30.1-19 11-24.7 43.7-16.7 84.6.8 4 1.7 8 2.7 12.1-4.7 1.3-9.2 2.7-13.5 4.2-38.6 13.5-63.3 34.6-63.3 56.5 0 22.6 26.5 45.3 66.7 59.1 3.2 1.1 6.5 2.1 9.9 3.1-1.1 4.4-2.1 8.8-2.9 13-7.6 40.2-1.7 72.1 17.3 83.1 19.6 11.3 52.5-.3 84.5-28.3 2.5-2.2 5.1-4.6 7.6-7 3.3 3.2 6.6 6.2 9.9 9 31 26.7 61.7 37.5 80.6 26.5 19.6-11.3 25.9-45.6 17.7-87.4-.6-3.2-1.4-6.4-2.2-9.8 2.3-.7 4.6-1.4 6.8-2.1 41.8-13.9 69.1-36.3 69.1-59.2-.1-21.9-25.6-43.1-65-56.7zm-9.1 101.2c-2 .7-4 1.3-6.1 1.9-4.6-14.6-10.9-30.2-18.5-46.2 7.3-15.7 13.3-31 17.8-45.6 3.7 1.1 7.4 2.2 10.9 3.4 33.8 11.6 54.4 28.8 54.4 42.1-.1 14.1-22.3 32.4-58.5 44.4zm-15 29.7c3.7 18.5 4.2 35.1 1.8 48.2-2.2 11.7-6.5 19.5-12 22.7-11.5 6.7-36.1-2-62.6-24.8-3-2.6-6.1-5.4-9.2-8.4 10.3-11.2 20.6-24.3 30.6-38.8 17.6-1.6 34.3-4.1 49.4-7.6.8 2.9 1.5 5.8 2 8.7zm-151.6 69.7c-11.2 4-20.2 4.1-25.6 1-11.5-6.6-16.3-32.3-9.8-66.7.7-3.9 1.6-8 2.7-12.1 15 3.3 31.5 5.7 49.2 7.1 10.1 14.2 20.7 27.3 31.3 38.7-2.3 2.2-4.6 4.4-7 6.4-14.1 12.4-28.3 21.2-40.8 25.6zM139.3 294c-17.8-6.1-32.5-14-42.6-22.6-9.1-7.8-13.6-15.4-13.6-21.7 0-13.3 19.8-30.2 52.9-41.8 4-1.4 8.2-2.7 12.6-4 4.6 14.9 10.6 30.4 17.8 46.1-7.3 15.9-13.4 31.7-18 46.8-3.2-.9-6.2-1.8-9.1-2.8zm17.6-120.1c-6.9-35.1-2.3-61.5 9.2-68.1 12.2-7.1 39.2 3 67.7 28.3 1.8 1.6 3.6 3.3 5.5 5.1-10.6 11.4-21.1 24.4-31.1 38.5-17.2 1.6-33.6 4.1-48.7 7.6-1-4-1.8-7.8-2.6-11.4zm157.5 38.8c-3.6-6.2-7.3-12.3-11.1-18.3 11.6 1.5 22.8 3.4 33.3 5.8-3.1 10.1-7.1 20.6-11.7 31.4-3.3-6.1-6.8-12.5-10.5-18.9zm-64.2-62.5c7.2 7.8 14.4 16.5 21.5 25.9-7.1-.3-14.4-.5-21.7-.5-7.2 0-14.4.2-21.5.5 7.1-9.3 14.4-18 21.7-25.9zm-64.6 62.7c-3.6 6.3-7 12.6-10.3 18.9-4.5-10.8-8.4-21.4-11.6-31.6 10.4-2.3 21.5-4.2 33.1-5.7-3.9 5.9-7.6 12.1-11.2 18.4zm11.5 93.1c-12-1.3-23.2-3.1-33.6-5.4 3.2-10.4 7.2-21.2 11.8-32.2 3.3 6.3 6.7 12.6 10.3 18.9 3.7 6.4 7.5 12.6 11.5 18.7zm53.5 44.3c-7.4-8-14.8-16.8-22-26.3 7 .3 14.1.4 21.4.4 7.4 0 14.8-.2 22-.5-7.1 9.7-14.3 18.5-21.4 26.4zm74.4-82.5c4.9 11.1 9 21.9 12.3 32.1-10.6 2.4-22 4.4-34 5.8 3.8-6 7.5-12.2 11.2-18.6 3.7-6.4 7.2-12.8 10.5-19.3zm-24.1 11.6c-5.7 9.9-11.6 19.3-17.5 28.3-10.8.8-22 1.2-33.4 1.2-11.4 0-22.4-.4-33-1-6.2-9-12.2-18.5-17.8-28.3-5.7-9.8-10.9-19.6-15.6-29.4 4.7-9.8 9.9-19.7 15.5-29.4 5.6-9.8 11.6-19.2 17.7-28.2 10.9-.8 22-1.2 33.2-1.2 11.3 0 22.4.4 33.3 1.3 6 8.9 11.9 18.3 17.6 28.1 5.7 9.9 11 19.7 15.7 29.3-4.7 9.5-10 19.4-15.7 29.3zm32.2-174.1c12.2 7 17 35.5 9.3 72.8-.5 2.4-1 4.8-1.6 7.3-15.1-3.5-31.6-6.1-48.8-7.7-10-14.3-20.4-27.3-30.9-38.5 2.8-2.7 5.6-5.3 8.4-7.7 26.9-23.6 52.1-32.8 63.6-26.2zM250 217.1c18 0 32.6 14.6 32.6 32.6S268 282.3 250 282.3s-32.6-14.6-32.6-32.6 14.6-32.6 32.6-32.6z"/></svg></button> <button id="close-nav" aria-label="Close navigation" class="view appearance-none hidden rounded-full items-center justify-center text-white cursor-pointer" style="background-color:var(--docs-theme-color); width:4rem; height:4rem; padding:10px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="currentColor" class="w-full"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"/></svg></button></div><div class="view flex-row flex-nowrap relative"><div id="navigation" class="navigation view fixed wide:sticky wide:left-0 z-10 opacity-0 wide:opacity-1 h-screen inset-y-0 w-72 border-right border-color-faint bg-theme"><nav id="navigation-scroller" class="view overflow-x-hidden overflow-y-auto h-full p-6 pt-12"><h1 class="m-0 mb-4" style="font-size:1rem;"><a class="view no-underline group font-semibold" href="/react-native-web/canary/" style="color:var(--docs-theme-color)"><span class="view flex-row items-center overflow-x-hidden mb-1 text-xl">React Native for Web </span><span>react-native-web@0.14.11</span></a></h1><ul class="view list-none mt-6"><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Getting started</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/" style="padding:2px 10px; margin:-2px -10px;">Introduction</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/installation/" style="padding:2px 10px; margin:-2px -10px;">Installation</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/multi-platform/" style="padding:2px 10px; margin:-2px -10px;">Multi-platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/browser-compatibility/" style="padding:2px 10px; margin:-2px -10px;">Browser compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/react-native-compatibility/" style="padding:2px 10px; margin:-2px -10px;">React Native compatibility</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/help/" style="padding:2px 10px; margin:-2px -10px;">Help</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Main concepts</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/accessibility/" style="padding:2px 10px; margin:-2px -10px;">Accessibility <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/interactions/" style="padding:2px 10px; margin:-2px -10px;">Interactions</a></li><li class="view item mb-2"><a class="text block font-semibold text-color-inherit" href="/react-native-web/canary/docs/localization/" style="padding:2px 10px; margin:-2px -10px;
background-color:var(--docs-theme-color-faded); border-left:3px solid var(--docs-theme-color); margin-left:-13px; border-radius:0 0.25rem 0.25rem 0;">Localization</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/rendering/" style="padding:2px 10px; margin:-2px -10px;">Rendering</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/styling/" style="padding:2px 10px; margin:-2px -10px;">Styling</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Components</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/activity-indicator/" style="padding:2px 10px; margin:-2px -10px;">ActivityIndicator</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/button/" style="padding:2px 10px; margin:-2px -10px;">Button</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/checkbox/" style="padding:2px 10px; margin:-2px -10px;">CheckBox</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/image/" style="padding:2px 10px; margin:-2px -10px;">Image</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/image-background/" style="padding:2px 10px; margin:-2px -10px;">ImageBackground</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/lists/" style="padding:2px 10px; margin:-2px -10px;">Lists</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/modal/" style="padding:2px 10px; margin:-2px -10px;">Modal <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/picker/" style="padding:2px 10px; margin:-2px -10px;">Picker</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/pressable/" style="padding:2px 10px; margin:-2px -10px;">Pressable <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#86b300; color:#86b300; font-weight:normal">New</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/progress-bar/" style="padding:2px 10px; margin:-2px -10px;">ProgressBar</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/scroll-view/" style="padding:2px 10px; margin:-2px -10px;">ScrollView</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/switch/" style="padding:2px 10px; margin:-2px -10px;">Switch</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/text/" style="padding:2px 10px; margin:-2px -10px;">Text <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/text-input/" style="padding:2px 10px; margin:-2px -10px;">TextInput</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/touchables/" style="padding:2px 10px; margin:-2px -10px;">Touchables</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/view/" style="padding:2px 10px; margin:-2px -10px;">View <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">APIs</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/animated/" style="padding:2px 10px; margin:-2px -10px;">Animated</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/app-registry/" style="padding:2px 10px; margin:-2px -10px;">AppRegistry</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/app-state/" style="padding:2px 10px; margin:-2px -10px;">AppState</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/appearance/" style="padding:2px 10px; margin:-2px -10px;">Appearance</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/clipboard/" style="padding:2px 10px; margin:-2px -10px;">Clipboard</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/dimensions/" style="padding:2px 10px; margin:-2px -10px;">Dimensions</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/i18n-manager/" style="padding:2px 10px; margin:-2px -10px;">I18nManager <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/linking/" style="padding:2px 10px; margin:-2px -10px;">Linking <span class="px-1 ml-2 inline-block border rounded text-uppercase text-sm" style="border-color:#ff8300; color:#ff8300; font-weight:normal">Change</span></a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/pan-responder/" style="padding:2px 10px; margin:-2px -10px;">PanResponder</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/pixel-ratio/" style="padding:2px 10px; margin:-2px -10px;">PixelRatio</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/platform/" style="padding:2px 10px; margin:-2px -10px;">Platform</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/style-sheet/" style="padding:2px 10px; margin:-2px -10px;">StyleSheet</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/vibration/" style="padding:2px 10px; margin:-2px -10px;">Vibration</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Hooks</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/use-color-scheme/" style="padding:2px 10px; margin:-2px -10px;">useColorScheme</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/use-window-dimensions/" style="padding:2px 10px; margin:-2px -10px;">useWindowDimensions</a></li></ul></li><li class="view item mb-2"><span class="text block font-semibold text-uppercase text-sm">Appendix</span><ul class="view list-none mt-2 mb-4"><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/unstable-apis/" style="padding:2px 10px; margin:-2px -10px;">Unstable APIs</a></li><li class="view item mb-2"><a class="text block text-color-faint hover:text-color-inherit" href="/react-native-web/canary/docs/about-project/" style="padding:2px 10px; margin:-2px -10px;">About the project</a></li></ul></li></ul></nav></div><main id="main" class="view flex-1"><div class="view w-full mt-12 px-4 wide:px-20"><article class="markdown"><h1>Localization</h1><div class="lead"><p>Provided localized layout is largely automatic if you follow this guide.</p></div><p>React Native for Web provides several mechanisms to automatically flipping your application layout to match the writing direction of the primary language.</p><h2 id="localized-component-layout">Localized component layout <a class="header-anchor" href="#localized-component-layout">#</a></h2><p>To automatically flip the layout of a flexbox or grid container, set the <code>dir</code> prop on <code>View</code>, <code>Text</code>, or <code>TextInput</code> components to desired writing direction (e.g., <code>&quot;rtl&quot;</code>). By default, the native writing direction is set to <code>&quot;auto&quot;</code> for <code>Text</code> and <code>TextInput</code> elements. This uses the browser’s built-in writing direction algorithm to automatically detect whether the text should be displayed left-to-right or right-to-left.</p><p>You can also set the <code>lang</code> prop on <code>Text</code> or <code>TextInput</code> to provide browsers with information about the language of the Browsers provide native support for bi-directional flexbox layouts.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> alignItems<span class="token operator">:</span> <span class="token string">'flex-start'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>The non-standard <a href="/react-native-web/canary/docs/styling/#non-standard-properties">direction-independent style properties</a> should also be used as much as possible. React Native for Web will automatically flip the direction of these properties when the application is re-rendered after using <code>I18nManager</code> to enable RTL mode.</p><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// "start" is "left" for LTR and "right" for RTL</span><br><span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> paddingStart<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> marginStart<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>The <code>I18nManager</code> API can also be used to help with more fine-grained control of layout, e.g., flipping images or transforms.</p><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token punctuation">{</span> isRTL <span class="token punctuation">}</span> <span class="token operator">=</span> I18nManager<span class="token punctuation">.</span><span class="token function">getConstants</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> transform <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> scaleX<span class="token operator">:</span> isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">:</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><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'forward.svg'</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>transform<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isRTL <span class="token operator">?</span> <span class="token string">'back.svg'</span> <span class="token operator">:</span> <span class="token string">'forward.svg'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre><h2 id="localized-application-layout">Localized application layout <a class="header-anchor" href="#localized-application-layout">#</a></h2><p>The application will automatically display as RTL if rendered <em>after</em> setting the direction to RTL.</p><pre class="language-js"><code class="language-js"><span class="token comment">// Either force RTL (e.g., for unit tests)</span><br>I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Or set RTL if you know the language is RTL</span><br>I18nManager<span class="token punctuation">.</span><span class="token function">setPreferredLanguageRTL</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Once the application is rendered in RTL mode, it will flip all the direction-independent styles and ensure that the <code>isRTL</code> constant is <code>true</code>.</p></article><div class="flex mt-4"><div class="inline-block w-auto text-sm pt-1 pb-1 mr-2 rounded text-color-faint">Updated <time datetime="2021-02-03T02:01:54.152Z">February 2, 2021</time></div><a class="no-underline inline-block w-auto text-sm hover:bg-gray-200 py-1 px-3 rounded text-color-faint" href="https://github.com/necolas/react-native-web/edit/main/packages/www/./src/pages/docs/concepts/localization.md" target="_blank">Edit</a></div><div class="view flex-row items-center mt-12 py-4 border-top border-color-faint"><a aria-label="Link to React Native for Web GitHub repository" class="inline-block mr-2 opacity-50 hover:opacity-100 text-color" style="width:20px;height:20px;vertical-align:middle;" rel="noopener noreferrer" href="https://github.com/necolas/react-native-web" target="_blank"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-full"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><div class="text text-sm text-color-faint"><a class="no-underline" href="/">React Native for Web</a> – <span>Copyright © Facebook Inc.</span></div></div></div></main></div></div></div></body></html>
Reference in New Issue View Git Blame Copy Permalink