mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on a25335771dd80064ae88f3fe367f9ccd799f5bb3
This commit is contained in:
Website Deployment Script
@@ -72,7 +72,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" 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>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" 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>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" 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>Accessibility properties</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessible-ios-android"></a><a href="#accessible-ios-android" 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>accessible (iOS, Android)</h4>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" 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>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" 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>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" 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>Accessibility properties</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessible-ios-android"></a><a href="#accessible-ios-android" 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>accessible (iOS, Android)</h4>
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/direct-manipulation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Direct Manipulation</h1></header><article><div><span><p>It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. <code>setNativeProps</code> is the React Native equivalent to setting properties directly on a DOM node.</p>
|
||||
<blockquote>
|
||||
<p>Use setNativeProps when frequent re-rendering creates a performance bottleneck</p>
|
||||
<p>Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. <code>setNativeProps</code> is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with <code>setState</code> and <a href="http://facebook.github.io/react/advanced-performance.md#shouldcomponentupdate-in-action">shouldComponentUpdate</a>.</p>
|
||||
<p>Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. <code>setNativeProps</code> is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with <code>setState</code> and <a href="https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action">shouldComponentUpdate</a>.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-with-touchableopacity"></a><a href="#setnativeprops-with-touchableopacity" 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>setNativeProps with TouchableOpacity</h2>
|
||||
<p><a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">TouchableOpacity</a> uses <code>setNativeProps</code> internally to update the opacity of its child component:</p>
|
||||
@@ -109,7 +109,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.</p>
|
||||
<p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-prod.js">NativeMethodsMixin</a> you will notice that it is a wrapper around <code>RCTUIManager.updateView</code> - this is the exact same function call that results from re-rendering - see <a href="https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813">receiveComponent in ReactNativeBaseComponent</a>.</p>
|
||||
<p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js">NativeMethodsMixin</a> you will notice that it is a wrapper around <code>RCTUIManager.updateView</code> - this is the exact same function call that results from re-rendering - see <a href="https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813">receiveComponent in ReactNativeBaseComponent</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="composite-components-and-setnativeprops"></a><a href="#composite-components-and-setnativeprops" 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>Composite components and setNativeProps</h2>
|
||||
<p>Composite components are not backed by a native view, so you cannot call <code>setNativeProps</code> on them. Consider this example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/direct-manipulation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Direct Manipulation</h1></header><article><div><span><p>It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. <code>setNativeProps</code> is the React Native equivalent to setting properties directly on a DOM node.</p>
|
||||
<blockquote>
|
||||
<p>Use setNativeProps when frequent re-rendering creates a performance bottleneck</p>
|
||||
<p>Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. <code>setNativeProps</code> is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with <code>setState</code> and <a href="http://facebook.github.io/react/advanced-performance.md#shouldcomponentupdate-in-action">shouldComponentUpdate</a>.</p>
|
||||
<p>Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. <code>setNativeProps</code> is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with <code>setState</code> and <a href="https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action">shouldComponentUpdate</a>.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-with-touchableopacity"></a><a href="#setnativeprops-with-touchableopacity" 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>setNativeProps with TouchableOpacity</h2>
|
||||
<p><a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">TouchableOpacity</a> uses <code>setNativeProps</code> internally to update the opacity of its child component:</p>
|
||||
@@ -109,7 +109,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.</p>
|
||||
<p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-prod.js">NativeMethodsMixin</a> you will notice that it is a wrapper around <code>RCTUIManager.updateView</code> - this is the exact same function call that results from re-rendering - see <a href="https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813">receiveComponent in ReactNativeBaseComponent</a>.</p>
|
||||
<p>If you look at the implementation of <code>setNativeProps</code> in <a href="https://github.com/facebook/react-native/blob/master/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js">NativeMethodsMixin</a> you will notice that it is a wrapper around <code>RCTUIManager.updateView</code> - this is the exact same function call that results from re-rendering - see <a href="https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813">receiveComponent in ReactNativeBaseComponent</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="composite-components-and-setnativeprops"></a><a href="#composite-components-and-setnativeprops" 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>Composite components and setNativeProps</h2>
|
||||
<p>Composite components are not backed by a native view, so you cannot call <code>setNativeProps</code> on them. Consider this example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
|
||||
@@ -121,8 +121,8 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-direction"></a><a href="#layout-direction" 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>Layout Direction</h3>
|
||||
<p>Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge <code>start</code> and <code>end</code> refer to. By default React Native lays out with LTR layout direction. In this mode <code>start</code> refers to left and <code>end</code> refers to right.</p>
|
||||
<ul>
|
||||
<li><p><code>LTR</code> (<strong>default value</strong>) Text and children and laid out from left to right. Margin and padding applied the start of an element are applied on the left side.</p></li>
|
||||
<li><p><code>RTL</code> Text and children and laid out from right to left. Margin and padding applied the start of an element are applied on the right side.</p></li>
|
||||
<li><p><code>LTR</code> (<strong>default value</strong>) Text and children are laid out from left to right. Margin and padding applied the start of an element are applied on the left side.</p></li>
|
||||
<li><p><code>RTL</code> Text and children are laid out from right to left. Margin and padding applied the start of an element are applied on the right side.</p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="justify-content"></a><a href="#justify-content" 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>Justify Content</h4>
|
||||
<p><a href="https://facebook.github.io/react-native/docs/layout-props#justifycontent"><code>justifyContent</code></a> describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with <code>flexDirection</code> set to <code>row</code> or vertically within a container with <code>flexDirection</code> set to <code>column</code>.</p>
|
||||
|
||||
@@ -121,8 +121,8 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-direction"></a><a href="#layout-direction" 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>Layout Direction</h3>
|
||||
<p>Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge <code>start</code> and <code>end</code> refer to. By default React Native lays out with LTR layout direction. In this mode <code>start</code> refers to left and <code>end</code> refers to right.</p>
|
||||
<ul>
|
||||
<li><p><code>LTR</code> (<strong>default value</strong>) Text and children and laid out from left to right. Margin and padding applied the start of an element are applied on the left side.</p></li>
|
||||
<li><p><code>RTL</code> Text and children and laid out from right to left. Margin and padding applied the start of an element are applied on the right side.</p></li>
|
||||
<li><p><code>LTR</code> (<strong>default value</strong>) Text and children are laid out from left to right. Margin and padding applied the start of an element are applied on the left side.</p></li>
|
||||
<li><p><code>RTL</code> Text and children are laid out from right to left. Margin and padding applied the start of an element are applied on the right side.</p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="justify-content"></a><a href="#justify-content" 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>Justify Content</h4>
|
||||
<p><a href="https://facebook.github.io/react-native/docs/layout-props#justifycontent"><code>justifyContent</code></a> describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with <code>flexDirection</code> set to <code>row</code> or vertically within a container with <code>flexDirection</code> set to <code>column</code>.</p>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<img width="300" height="300" style="float: right; margin: -30px 4px 0;" src="/react-native/docs/assets/HermesLogo.svg"/>
|
||||
</a></p>
|
||||
<p><a href="https://hermesengine.dev">Hermes</a> is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an <strong>opt-in</strong> React Native feature, and this guide explains how to enable it.</p>
|
||||
<p>First, ensure you're using at least version 0.60.2 of React Native. If you're upgrading an existing app ensure everything works before trying to switch to Hermes.</p>
|
||||
<p>First, ensure you're using at least version 0.60.4 of React Native. If you're upgrading an existing app ensure everything works before trying to switch to Hermes.</p>
|
||||
<p>Edit your <code>android/app/build.gradle</code> file and make the change illustrated below:</p>
|
||||
<pre><code class="hljs css language-diff"> project.ext.react = [
|
||||
entryFile: "index.js",
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<img width="300" height="300" style="float: right; margin: -30px 4px 0;" src="/react-native/docs/assets/HermesLogo.svg"/>
|
||||
</a></p>
|
||||
<p><a href="https://hermesengine.dev">Hermes</a> is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an <strong>opt-in</strong> React Native feature, and this guide explains how to enable it.</p>
|
||||
<p>First, ensure you're using at least version 0.60.2 of React Native. If you're upgrading an existing app ensure everything works before trying to switch to Hermes.</p>
|
||||
<p>First, ensure you're using at least version 0.60.4 of React Native. If you're upgrading an existing app ensure everything works before trying to switch to Hermes.</p>
|
||||
<p>Edit your <code>android/app/build.gradle</code> file and make the change illustrated below:</p>
|
||||
<pre><code class="hljs css language-diff"> project.ext.react = [
|
||||
entryFile: "index.js",
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<p>When using React Native, you're going to be running your JavaScript code in two environments:</p>
|
||||
<ul>
|
||||
<li>In most cases, React Native will use <a href="http://trac.webkit.org/wiki/JavaScriptCore">JavaScriptCore</a>, the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.</li>
|
||||
<li>When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses <a href="https://code.google.com/p/v8/">V8</a> as its JavaScript engine.</li>
|
||||
<li>When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses <a href="https://v8.dev/">V8</a> as its JavaScript engine.</li>
|
||||
</ul>
|
||||
<p>While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="javascript-syntax-transformers"></a><a href="#javascript-syntax-transformers" 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>JavaScript Syntax Transformers</h2>
|
||||
@@ -108,7 +108,7 @@
|
||||
</ul>
|
||||
<p>Stage 3</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/sebmarkbage/ecmascript-rest-spread">Object Spread</a>: <code>var extended = { ...obj, a: 10 };</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-object-rest-spread">Object Spread</a>: <code>var extended = { ...obj, a: 10 };</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-static-class-features">Static class fields</a>: <code>class CustomDate { static epoch = new CustomDate(0); }</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-optional-chaining">Optional Chaining</a>: <code>var name = obj.user?.name;</code></li>
|
||||
</ul>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<p>When using React Native, you're going to be running your JavaScript code in two environments:</p>
|
||||
<ul>
|
||||
<li>In most cases, React Native will use <a href="http://trac.webkit.org/wiki/JavaScriptCore">JavaScriptCore</a>, the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.</li>
|
||||
<li>When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses <a href="https://code.google.com/p/v8/">V8</a> as its JavaScript engine.</li>
|
||||
<li>When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses <a href="https://v8.dev/">V8</a> as its JavaScript engine.</li>
|
||||
</ul>
|
||||
<p>While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="javascript-syntax-transformers"></a><a href="#javascript-syntax-transformers" 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>JavaScript Syntax Transformers</h2>
|
||||
@@ -108,7 +108,7 @@
|
||||
</ul>
|
||||
<p>Stage 3</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/sebmarkbage/ecmascript-rest-spread">Object Spread</a>: <code>var extended = { ...obj, a: 10 };</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-object-rest-spread">Object Spread</a>: <code>var extended = { ...obj, a: 10 };</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-static-class-features">Static class fields</a>: <code>class CustomDate { static epoch = new CustomDate(0); }</code></li>
|
||||
<li><a href="https://github.com/tc39/proposal-optional-chaining">Optional Chaining</a>: <code>var name = obj.user?.name;</code></li>
|
||||
</ul>
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
<h4><a class="anchor" aria-hidden="true" id="resolving-javascript-issues"></a><a href="#resolving-javascript-issues" 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>Resolving JavaScript issues</h4>
|
||||
<p>If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://facebook.github.io/react/component-specs.md#updating-shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="resolving-native-ui-issues"></a><a href="#resolving-native-ui-issues" 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>Resolving native UI Issues</h4>
|
||||
<p>If you identified a native UI problem, there are usually two scenarios:</p>
|
||||
<ol>
|
||||
@@ -214,7 +214,7 @@
|
||||
<li>investigate using <code>renderToHardwareTextureAndroid</code> for complex, static content that is being animated/transformed (e.g. the <code>Navigator</code> slide/alpha animations)</li>
|
||||
<li>make sure that you are <strong>not</strong> using <code>needsOffscreenAlphaCompositing</code>, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.</li>
|
||||
</ul>
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://www.androiddocs.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
<h4><a class="anchor" aria-hidden="true" id="resolving-javascript-issues"></a><a href="#resolving-javascript-issues" 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>Resolving JavaScript issues</h4>
|
||||
<p>If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://facebook.github.io/react/component-specs.md#updating-shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="resolving-native-ui-issues"></a><a href="#resolving-native-ui-issues" 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>Resolving native UI Issues</h4>
|
||||
<p>If you identified a native UI problem, there are usually two scenarios:</p>
|
||||
<ol>
|
||||
@@ -214,7 +214,7 @@
|
||||
<li>investigate using <code>renderToHardwareTextureAndroid</code> for complex, static content that is being animated/transformed (e.g. the <code>Navigator</code> slide/alpha animations)</li>
|
||||
<li>make sure that you are <strong>not</strong> using <code>needsOffscreenAlphaCompositing</code>, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.</li>
|
||||
</ul>
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://www.androiddocs.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
|
||||
@@ -80,8 +80,7 @@
|
||||
</div>
|
||||
<p>Handle push notifications for your app, including permission handling and icon badge number.</p>
|
||||
<p>To get up and running, <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6">configure your notifications with Apple</a> and your server-side system.</p>
|
||||
<p>Add the PushNotificationIOS library to your Podfile:
|
||||
./ios/Podfile</p>
|
||||
<p>Add the PushNotificationIOS library to your Podfile: ./ios/Podfile</p>
|
||||
<pre><code class="hljs">...
|
||||
target <span class="hljs-string">'myAwesomeApp'</span> do
|
||||
# Pods for myAwesomeApp
|
||||
|
||||
@@ -80,8 +80,7 @@
|
||||
</div>
|
||||
<p>Handle push notifications for your app, including permission handling and icon badge number.</p>
|
||||
<p>To get up and running, <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6">configure your notifications with Apple</a> and your server-side system.</p>
|
||||
<p>Add the PushNotificationIOS library to your Podfile:
|
||||
./ios/Podfile</p>
|
||||
<p>Add the PushNotificationIOS library to your Podfile: ./ios/Podfile</p>
|
||||
<pre><code class="hljs">...
|
||||
target <span class="hljs-string">'myAwesomeApp'</span> do
|
||||
# Pods for myAwesomeApp
|
||||
|
||||
Reference in New Issue
Block a user