Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on b324a2fc163168d7e0418971abfbe71303eab94e
This commit is contained in:
Website Deployment Script
2018-12-11 17:13:45 +00:00
parent b8c018e04d
commit 81c552c034
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/improvingux.html
+4 -4
View File
@@ -43,19 +43,19 @@
<li>Make sure the return button focuses the next field or submits the form</li>
</ul>
<p>Check out <a href="/react-native/docs/next/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
<video src="/react-native/img/textinput.mp4" muted autoplay loop width="320" height="430"></video>
<p><a href="https://snack.expo.io/H1iGt2vSW">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="manage-layout-when-keyboard-is-visible"></a><a href="#manage-layout-when-keyboard-is-visible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manage layout when keyboard is visible</h2>
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/next/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
<video src="/react-native/img/keyboardavoidingview.mp4" muted autoplay loop width="320" height="448"></video>
<p><a href="https://snack.expo.io/ryxRkwnrW">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="make-tappable-areas-larger"></a><a href="#make-tappable-areas-larger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Make tappable areas larger</h2>
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/next/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
<video src="/react-native/img/hitslop.mp4" muted autoplay loop width="320" height="120"></video>
<p><a href="https://snack.expo.io/rJPwCt4HZ">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="use-android-ripple"></a><a href="#use-android-ripple" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Android Ripple</h2>
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/next/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API &lt; 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
<video src="/react-native/img/ripple.mp4" muted autoplay loop width="320"></video>
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
<p>Multiple screen orientations should work fine by default unless you're using <code>Dimensions</code> API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.</p>
docs/next/improvingux/index.html
+4 -4
View File
@@ -43,19 +43,19 @@
<li>Make sure the return button focuses the next field or submits the form</li>
</ul>
<p>Check out <a href="/react-native/docs/next/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
<video src="/react-native/img/textinput.mp4" muted autoplay loop width="320" height="430"></video>
<p><a href="https://snack.expo.io/H1iGt2vSW">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="manage-layout-when-keyboard-is-visible"></a><a href="#manage-layout-when-keyboard-is-visible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manage layout when keyboard is visible</h2>
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/next/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
<video src="/react-native/img/keyboardavoidingview.mp4" muted autoplay loop width="320" height="448"></video>
<p><a href="https://snack.expo.io/ryxRkwnrW">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="make-tappable-areas-larger"></a><a href="#make-tappable-areas-larger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Make tappable areas larger</h2>
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/next/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
<video src="/react-native/img/hitslop.mp4" muted autoplay loop width="320" height="120"></video>
<p><a href="https://snack.expo.io/rJPwCt4HZ">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="use-android-ripple"></a><a href="#use-android-ripple" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Android Ripple</h2>
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/next/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API &lt; 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
<video src="/react-native/img/ripple.mp4" muted autoplay loop width="320"></video>
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
<p>Multiple screen orientations should work fine by default unless you're using <code>Dimensions</code> API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.</p>
docs/next/more-resources.html
+1 -1
View File
@@ -54,7 +54,7 @@
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
<p><a href="https://docs.expo.io">Expo</a> is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.</p>
<p><a href="https://yogalayout.com/">Yoga</a> is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.</p>
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.</p>
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.</p>
<p>The <a href="/react-native/docs/next/debugging#react-developer-tools">React Developer Tools</a> are great for debugging React and React Native apps.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/network">← Networking</a><a class="docs-next button" href="/react-native/docs/next/components-and-apis">Components and APIs →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
docs/next/more-resources/index.html
+1 -1
View File
@@ -54,7 +54,7 @@
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
<p><a href="https://docs.expo.io">Expo</a> is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.</p>
<p><a href="https://yogalayout.com/">Yoga</a> is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.</p>
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.</p>
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.</p>
<p>The <a href="/react-native/docs/next/debugging#react-developer-tools">React Developer Tools</a> are great for debugging React and React Native apps.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/network">← Networking</a><a class="docs-next button" href="/react-native/docs/next/components-and-apis">Components and APIs →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>