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 45a10c1031ffce52783f1c438f64ac06a2e946d9
This commit is contained in:
Website Deployment Script
@@ -169,7 +169,7 @@ _onDirectionChange = <span class="hljs-function"><span class="hljs-params">()</s
|
||||
<span class="hljs-string">'Reload this page'</span>,
|
||||
<span class="hljs-string">'Please reload this page to change the UI direction! '</span> +
|
||||
<span class="hljs-string">'All examples in this app will be affected. '</span> +
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>,
|
||||
);
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
@@ -169,7 +169,7 @@ _onDirectionChange = <span class="hljs-function"><span class="hljs-params">()</s
|
||||
<span class="hljs-string">'Reload this page'</span>,
|
||||
<span class="hljs-string">'Please reload this page to change the UI direction! '</span> +
|
||||
<span class="hljs-string">'All examples in this app will be affected. '</span> +
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>,
|
||||
);
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
@@ -447,7 +447,7 @@ _onDirectionChange = <span class="hljs-function"><span class="hljs-params">()</s
|
||||
<span class="hljs-string">'Reload this page'</span>,
|
||||
<span class="hljs-string">'Please reload this page to change the UI direction! '</span> +
|
||||
<span class="hljs-string">'All examples in this app will be affected. '</span> +
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="hljs-string">'Check them out to see what they look like in RTL layout.'</span>,
|
||||
);
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystate-ios-android"></a><a href="#accessibilitystate-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>accessibilityState (iOS, Android)</h4>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-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>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
@@ -104,7 +104,7 @@
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityState</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" 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>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystate-ios-android"></a><a href="#accessibilitystate-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>accessibilityState (iOS, Android)</h4>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-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>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
@@ -104,7 +104,7 @@
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityState</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" 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>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
@@ -28,7 +28,7 @@
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
@@ -28,7 +28,7 @@
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>),
|
||||
},
|
||||
]
|
||||
],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -53,7 +53,7 @@
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function">(<span class="hljs-params">password</span>) =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password),
|
||||
},
|
||||
],
|
||||
<span class="hljs-string">'secure-text'</span>
|
||||
<span class="hljs-string">'secure-text'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -62,7 +62,7 @@
|
||||
<span class="hljs-literal">null</span>,
|
||||
(text) => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Your username is '</span> + text),
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-string">'default'</span>
|
||||
<span class="hljs-string">'default'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -103,7 +103,7 @@
|
||||
[callbackOrButtons],
|
||||
[type],
|
||||
[defaultValue],
|
||||
[keyboardType]
|
||||
[keyboardType],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>),
|
||||
},
|
||||
]
|
||||
],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -53,7 +53,7 @@
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function">(<span class="hljs-params">password</span>) =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password),
|
||||
},
|
||||
],
|
||||
<span class="hljs-string">'secure-text'</span>
|
||||
<span class="hljs-string">'secure-text'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -62,7 +62,7 @@
|
||||
<span class="hljs-literal">null</span>,
|
||||
(text) => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Your username is '</span> + text),
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-string">'default'</span>
|
||||
<span class="hljs-string">'default'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -103,7 +103,7 @@
|
||||
[callbackOrButtons],
|
||||
[type],
|
||||
[defaultValue],
|
||||
[keyboardType]
|
||||
[keyboardType],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
{
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
}
|
||||
},
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.10/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
{
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
}
|
||||
},
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.10/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
Animated.spring(
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}} <span class="hljs-comment">// Back to zero</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}}, <span class="hljs-comment">// Back to zero</span>
|
||||
).start();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
Animated.spring(
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}} <span class="hljs-comment">// Back to zero</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}}, <span class="hljs-comment">// Back to zero</span>
|
||||
).start();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -169,7 +169,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<p><a href="/react-native/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -256,7 +256,7 @@ Animated.timing(opacity, {
|
||||
},
|
||||
},
|
||||
],
|
||||
{useNativeDriver: true} // <-- Add this
|
||||
{useNativeDriver: true}, // <-- Add this
|
||||
)}>
|
||||
{content}
|
||||
</Animated.ScrollView>
|
||||
|
||||
@@ -169,7 +169,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<p><a href="/react-native/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -256,7 +256,7 @@ Animated.timing(opacity, {
|
||||
},
|
||||
},
|
||||
],
|
||||
{useNativeDriver: true} // <-- Add this
|
||||
{useNativeDriver: true}, // <-- Add this
|
||||
)}>
|
||||
{content}
|
||||
</Animated.ScrollView>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<p><strong>Step 2:</strong> Create a <code>local.properties</code> file in the <code>android</code> directory of your react-native app with the following contents:</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">sdk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-sdk-macosx
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r10e
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r17b
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="download-links-for-android-ndk"></a><a href="#download-links-for-android-ndk" 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>Download links for Android NDK</h4>
|
||||
<ol>
|
||||
@@ -96,13 +96,13 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
rootProject.projectDir, <span class="hljs-string">'../node_modules/react-native/ReactAndroid'</span>)
|
||||
...
|
||||
</code></pre>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>compile 'com.facebook.react:react-native:+'</code> with <code>compile project(':ReactAndroid')</code>:</p>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>implementation 'com.facebook.react:react-native:+'</code> with <code>implementation project(':ReactAndroid')</code>:</p>
|
||||
<pre><code class="hljs css language-gradle">...
|
||||
<span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
implementation <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
implementation <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
implementation <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
|
||||
...
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<p><strong>Step 2:</strong> Create a <code>local.properties</code> file in the <code>android</code> directory of your react-native app with the following contents:</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">sdk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-sdk-macosx
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r10e
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r17b
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="download-links-for-android-ndk"></a><a href="#download-links-for-android-ndk" 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>Download links for Android NDK</h4>
|
||||
<ol>
|
||||
@@ -96,13 +96,13 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
rootProject.projectDir, <span class="hljs-string">'../node_modules/react-native/ReactAndroid'</span>)
|
||||
...
|
||||
</code></pre>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>compile 'com.facebook.react:react-native:+'</code> with <code>compile project(':ReactAndroid')</code>:</p>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>implementation 'com.facebook.react:react-native:+'</code> with <code>implementation project(':ReactAndroid')</code>:</p>
|
||||
<pre><code class="hljs css language-gradle">...
|
||||
<span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
implementation <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
implementation <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
implementation <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
|
||||
...
|
||||
}
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -223,7 +223,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -223,7 +223,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -144,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -194,7 +194,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -144,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -194,7 +194,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -81,6 +81,18 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<blockquote>
|
||||
<p>Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="safari-developer-tools"></a><a href="#safari-developer-tools" 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>Safari Developer Tools</h2>
|
||||
<p>You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".</p>
|
||||
<ul>
|
||||
<li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select "Show Develop menu in menu bar"</code></li>
|
||||
<li>Select your app's JSContext: <code>Develop → Simulator → JSContext</code></li>
|
||||
<li>Safari's Web Inspector should open which has a Console and a Debugger</li>
|
||||
</ul>
|
||||
<p>However, there are some disadvantages:</p>
|
||||
<ol>
|
||||
<li>No sourcemaps when debugging</li>
|
||||
<li>Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-developer-tools"></a><a href="#react-developer-tools" 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>React Developer Tools</h2>
|
||||
<p>You can use <a href="https://github.com/facebook/react-devtools/tree/master/packages/react-devtools">the standalone version of React Developer Tools</a> to debug the React component hierarchy. To use it, install the <code>react-devtools</code> package globally:</p>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> -g react-devtools
|
||||
|
||||
@@ -81,6 +81,18 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<blockquote>
|
||||
<p>Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="safari-developer-tools"></a><a href="#safari-developer-tools" 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>Safari Developer Tools</h2>
|
||||
<p>You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".</p>
|
||||
<ul>
|
||||
<li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select "Show Develop menu in menu bar"</code></li>
|
||||
<li>Select your app's JSContext: <code>Develop → Simulator → JSContext</code></li>
|
||||
<li>Safari's Web Inspector should open which has a Console and a Debugger</li>
|
||||
</ul>
|
||||
<p>However, there are some disadvantages:</p>
|
||||
<ol>
|
||||
<li>No sourcemaps when debugging</li>
|
||||
<li>Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-developer-tools"></a><a href="#react-developer-tools" 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>React Developer Tools</h2>
|
||||
<p>You can use <a href="https://github.com/facebook/react-devtools/tree/master/packages/react-devtools">the standalone version of React Developer Tools</a> to debug the React component hierarchy. To use it, install the <code>react-devtools</code> package globally:</p>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> -g react-devtools
|
||||
|
||||
@@ -233,7 +233,7 @@ npm start
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="java-development-kit"></a><a href="#java-development-kit" 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8 or newer</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8 or newer</a> as an alternative.</p>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8</a> as an alternative.</p>
|
||||
<p><block class="native mac linux windows android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android-development-environment"></a><a href="#android-development-environment" 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>Android development environment</h3>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p>
|
||||
@@ -270,28 +270,13 @@ npm start
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are checked:</p>
|
||||
<ul>
|
||||
<li><code>Android SDK Platform 27</code></li>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
<li><code>Intel x86 Atom_64 System Image</code> or <code>Google APIs Intel x86 Atom System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>26.0.3</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>27.0.3</code> is selected.</p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
@@ -353,29 +338,19 @@ npm start
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" 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>Using a virtual device</h3>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Oreo</strong> API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target.</p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Oreo</strong> API Level 27 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
|
||||
@@ -233,7 +233,7 @@ npm start
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="java-development-kit"></a><a href="#java-development-kit" 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8 or newer</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8 or newer</a> as an alternative.</p>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8</a> as an alternative.</p>
|
||||
<p><block class="native mac linux windows android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android-development-environment"></a><a href="#android-development-environment" 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>Android development environment</h3>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p>
|
||||
@@ -270,28 +270,13 @@ npm start
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are checked:</p>
|
||||
<ul>
|
||||
<li><code>Android SDK Platform 27</code></li>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
<li><code>Intel x86 Atom_64 System Image</code> or <code>Google APIs Intel x86 Atom System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>26.0.3</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>27.0.3</code> is selected.</p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
@@ -353,29 +338,19 @@ npm start
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" 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>Using a virtual device</h3>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Oreo</strong> API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target.</p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Oreo</strong> API Level 27 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
|
||||
@@ -57,7 +57,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
|
||||
<p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="flex-dimensions"></a><a href="#flex-dimensions" 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>Flex Dimensions</h2>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<blockquote>
|
||||
<p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -57,7 +57,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
|
||||
<p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="flex-dimensions"></a><a href="#flex-dimensions" 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>Flex Dimensions</h2>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<blockquote>
|
||||
<p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
<pre><code class="hljs">.
|
||||
├── <span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.js</span>
|
||||
└── <span class="hljs-selector-tag">img</span>
|
||||
├── check<span class="hljs-selector-class">.png</span>
|
||||
├── check@<span class="hljs-number">2</span>x<span class="hljs-selector-class">.png</span>
|
||||
└── check@<span class="hljs-number">3</span>x<span class="hljs-selector-class">.png</span>
|
||||
</code></pre>
|
||||
@@ -163,7 +164,7 @@ var icon = this.props.active
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ImageBackground</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{...}</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{width:</span> '<span class="hljs-attr">100</span>%', <span class="hljs-attr">height:</span> '<span class="hljs-attr">100</span>%'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Inside<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
<pre><code class="hljs">.
|
||||
├── <span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.js</span>
|
||||
└── <span class="hljs-selector-tag">img</span>
|
||||
├── check<span class="hljs-selector-class">.png</span>
|
||||
├── check@<span class="hljs-number">2</span>x<span class="hljs-selector-class">.png</span>
|
||||
└── check@<span class="hljs-number">3</span>x<span class="hljs-selector-class">.png</span>
|
||||
</code></pre>
|
||||
@@ -163,7 +164,7 @@ var icon = this.props.active
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ImageBackground</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{...}</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{width:</span> '<span class="hljs-attr">100</span>%', <span class="hljs-attr">height:</span> '<span class="hljs-attr">100</span>%'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Inside<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
|
||||
@@ -465,10 +465,10 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<h2><a class="anchor" aria-hidden="true" id="adding-react-native-to-your-app-1"></a><a href="#adding-react-native-to-your-app-1" 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>Adding React Native to your app</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-maven"></a><a href="#configuring-maven" 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>Configuring maven</h3>
|
||||
<p>Add the React Native dependency to your app's <code>build.gradle</code> file:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:23.0.1'</span>
|
||||
<pre><code class="hljs">dependencies {
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">'com.android.support:appcompat-v7:27.1.1'</span>
|
||||
...
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -546,7 +546,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use <code>startActivityForResult</code>, we need to pass the result to the <code>onActivityResult</code> method of our <code>ReactInstanceManager</code> instance.</p>
|
||||
<pre><code class="hljs css language-java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onActivityResult</span><span class="hljs-params">(<span class="hljs-keyword">int</span> requestCode, <span class="hljs-keyword">int</span> resultCode, Intent data)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
|
||||
@@ -556,6 +556,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
}
|
||||
mReactInstanceManager.onActivityResult( <span class="hljs-keyword">this</span>, requestCode, resultCode, data );
|
||||
}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-reactrootview"></a><a href="#the-magic-reactrootview" 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>The Magic: <code>ReactRootView</code></h4>
|
||||
|
||||
@@ -465,10 +465,10 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<h2><a class="anchor" aria-hidden="true" id="adding-react-native-to-your-app-1"></a><a href="#adding-react-native-to-your-app-1" 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>Adding React Native to your app</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-maven"></a><a href="#configuring-maven" 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>Configuring maven</h3>
|
||||
<p>Add the React Native dependency to your app's <code>build.gradle</code> file:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:23.0.1'</span>
|
||||
<pre><code class="hljs">dependencies {
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">'com.android.support:appcompat-v7:27.1.1'</span>
|
||||
...
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -546,7 +546,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use <code>startActivityForResult</code>, we need to pass the result to the <code>onActivityResult</code> method of our <code>ReactInstanceManager</code> instance.</p>
|
||||
<pre><code class="hljs css language-java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onActivityResult</span><span class="hljs-params">(<span class="hljs-keyword">int</span> requestCode, <span class="hljs-keyword">int</span> resultCode, Intent data)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
|
||||
@@ -556,6 +556,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
}
|
||||
mReactInstanceManager.onActivityResult( <span class="hljs-keyword">this</span>, requestCode, resultCode, data );
|
||||
}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-reactrootview"></a><a href="#the-magic-reactrootview" 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>The Magic: <code>ReactRootView</code></h4>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</ol>
|
||||
<p>You can generally figure out who may be relevant for a given issue by looking at the <a href="https://github.com/facebook/react-native/blob/master/.github/CODEOWNERS">CODEOWNERS</a> file.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="stale-issues"></a><a href="#stale-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>Stale issues</h3>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Simply commenting that the issue still exists is not very compelling (it's rare for critical, release blocking issues to have no activity for two months!). In order to make a good case for reopening the issue, you may need to do a bit of work:</p>
|
||||
<ul>
|
||||
<li>Can the issue be reproduced on the latest release candidate? Post a comment with the version you tested.</li>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</ol>
|
||||
<p>You can generally figure out who may be relevant for a given issue by looking at the <a href="https://github.com/facebook/react-native/blob/master/.github/CODEOWNERS">CODEOWNERS</a> file.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="stale-issues"></a><a href="#stale-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>Stale issues</h3>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Simply commenting that the issue still exists is not very compelling (it's rare for critical, release blocking issues to have no activity for two months!). In order to make a good case for reopening the issue, you may need to do a bit of work:</p>
|
||||
<ul>
|
||||
<li>Can the issue be reproduced on the latest release candidate? Post a comment with the version you tested.</li>
|
||||
|
||||
@@ -126,7 +126,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView);
|
||||
|
||||
module.exports = MapView;
|
||||
</span></code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to <code>requireNativeComponent</code> from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code.</p>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -255,7 +255,7 @@ render() {
|
||||
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<p>Note that all <code>RCTBubblingEventBlock</code> must be prefixed with <code>on</code>. Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<pre><code class="hljs css language-objectivec{9,17,31-48}"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
|
||||
@@ -126,7 +126,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView);
|
||||
|
||||
module.exports = MapView;
|
||||
</span></code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to <code>requireNativeComponent</code> from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code.</p>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -255,7 +255,7 @@ render() {
|
||||
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<p>Note that all <code>RCTBubblingEventBlock</code> must be prefixed with <code>on</code>. Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<pre><code class="hljs css language-objectivec{9,17,31-48}"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
|
||||
@@ -204,7 +204,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
},
|
||||
(x, y, width, height) => {
|
||||
<span class="hljs-built_in">console</span>.log(x + <span class="hljs-string">':'</span> + y + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
<p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> {relativeX, relativeY, width, height} = <span class="hljs-keyword">await</span> UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>
|
||||
<span class="hljs-number">100</span>,
|
||||
);
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(relativeX + <span class="hljs-string">':'</span> + relativeY + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
|
||||
@@ -204,7 +204,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
},
|
||||
(x, y, width, height) => {
|
||||
<span class="hljs-built_in">console</span>.log(x + <span class="hljs-string">':'</span> + y + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
<p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> {relativeX, relativeY, width, height} = <span class="hljs-keyword">await</span> UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>
|
||||
<span class="hljs-number">100</span>,
|
||||
);
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(relativeX + <span class="hljs-string">':'</span> + relativeY + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -33,7 +33,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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
</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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<p>This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
@@ -117,14 +117,14 @@ CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <spa
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.getTime()
|
||||
date.getTime(),
|
||||
); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</p>
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.toISOString()
|
||||
date.toISOString(),
|
||||
); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -33,7 +33,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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
</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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<p>This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
@@ -117,14 +117,14 @@ CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <spa
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.getTime()
|
||||
date.getTime(),
|
||||
); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</p>
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.toISOString()
|
||||
date.toISOString(),
|
||||
); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMoviesFromApi</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> fetch(
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>,
|
||||
);
|
||||
<span class="hljs-keyword">let</span> responseJson = <span class="hljs-keyword">await</span> response.json();
|
||||
<span class="hljs-keyword">return</span> responseJson.movies;
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMoviesFromApi</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> fetch(
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>,
|
||||
);
|
||||
<span class="hljs-keyword">let</span> responseJson = <span class="hljs-keyword">await</span> response.json();
|
||||
<span class="hljs-keyword">return</span> responseJson.movies;
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<span class="hljs-attr">message</span>:
|
||||
<span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>,
|
||||
}
|
||||
},
|
||||
);
|
||||
<span class="hljs-keyword">if</span> (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'You can use the camera'</span>);
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<span class="hljs-attr">message</span>:
|
||||
<span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>,
|
||||
}
|
||||
},
|
||||
);
|
||||
<span class="hljs-keyword">if</span> (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'You can use the camera'</span>);
|
||||
|
||||
@@ -102,6 +102,7 @@ BigButton.android.js
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">const</span> BigButton = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./BigButton'</span>);
|
||||
</code></pre>
|
||||
<p>React Native will automatically pick up the right file based on the running platform.</p>
|
||||
<p>If you share your React Native code with a website, you might as well use the <code>BigButton.native.js</code> so that both iOS and Android will use this file, while the website will use <code>BigButton.js</code>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/components-and-apis">← Components and APIs</a><a class="docs-next button" href="/react-native/docs/0.10/navigation">Navigating Between Screens →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -102,6 +102,7 @@ BigButton.android.js
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">const</span> BigButton = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./BigButton'</span>);
|
||||
</code></pre>
|
||||
<p>React Native will automatically pick up the right file based on the running platform.</p>
|
||||
<p>If you share your React Native code with a website, you might as well use the <code>BigButton.native.js</code> so that both iOS and Android will use this file, while the website will use <code>BigButton.js</code>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/components-and-apis">← Components and APIs</a><a class="docs-next button" href="/react-native/docs/0.10/navigation">Navigating Between Screens →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg'%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20Bananas)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,7 +61,9 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Greeting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{alignItems:</span> '<span class="hljs-attr">center</span>'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -80,7 +82,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg'%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20Bananas)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,7 +61,9 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Greeting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{alignItems:</span> '<span class="hljs-attr">center</span>'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -80,7 +82,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
|
||||
+12
-9
@@ -42,20 +42,23 @@
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Blink</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = {<span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span>};
|
||||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span> };
|
||||
|
||||
<span class="hljs-comment">// Toggle the state every second</span>
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> { <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText };
|
||||
});
|
||||
}, <span class="hljs-number">1000</span>);
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> (
|
||||
{ <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText }
|
||||
))
|
||||
), <span class="hljs-number">1000</span>);
|
||||
}
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">let</span> display = <span class="hljs-keyword">this</span>.state.isShowingText ? <span class="hljs-keyword">this</span>.props.text : <span class="hljs-string">' '</span>;
|
||||
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.state.isShowingText) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{display}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{this.props.text}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -75,7 +78,7 @@
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BisShowingText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20return%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.isShowingText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20isShowingText%3A%20true%20%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20(%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%0A%20%20%20%20%20%20))%0A%20%20%20%20)%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20if%20(!this.state.isShowingText)%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bthis.props.text%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/">Mobx</a> to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling <code>setState</code> directly.</p>
|
||||
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
|
||||
|
||||
@@ -42,20 +42,23 @@
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Blink</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = {<span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span>};
|
||||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span> };
|
||||
|
||||
<span class="hljs-comment">// Toggle the state every second</span>
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> { <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText };
|
||||
});
|
||||
}, <span class="hljs-number">1000</span>);
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> (
|
||||
{ <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText }
|
||||
))
|
||||
), <span class="hljs-number">1000</span>);
|
||||
}
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">let</span> display = <span class="hljs-keyword">this</span>.state.isShowingText ? <span class="hljs-keyword">this</span>.props.text : <span class="hljs-string">' '</span>;
|
||||
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.state.isShowingText) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{display}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{this.props.text}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -75,7 +78,7 @@
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BisShowingText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20return%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.isShowingText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20isShowingText%3A%20true%20%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20(%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%0A%20%20%20%20%20%20))%0A%20%20%20%20)%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20if%20(!this.state.isShowingText)%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bthis.props.text%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/">Mobx</a> to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling <code>setState</code> directly.</p>
|
||||
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
|
||||
|
||||
+12
-12
@@ -39,6 +39,17 @@
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">bigblue</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'blue'</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">30</span>,
|
||||
},
|
||||
<span class="hljs-attr">red</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LotsOfStyles</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -52,20 +63,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">bigblue</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'blue'</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">30</span>,
|
||||
},
|
||||
<span class="hljs-attr">red</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-comment">// skip this line if using Create React Native App</span>
|
||||
AppRegistry.registerComponent(<span class="hljs-string">'AwesomeProject'</span>, () => LotsOfStyles);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20LotsOfStyles%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigblue%7D%3Ejust%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigblue%2C%20styles.red%5D%7D%3Ebigblue%2C%20then%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigblue%5D%7D%3Ered%2C%20then%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20bigblue%3A%20%7B%0A%20%20%20%20color%3A%20'blue'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20fontSize%3A%2030%2C%0A%20%20%7D%2C%0A%20%20red%3A%20%7B%0A%20%20%20%20color%3A%20'red'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfStyles)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20bigblue%3A%20%7B%0A%20%20%20%20color%3A%20'blue'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20fontSize%3A%2030%2C%0A%20%20%7D%2C%0A%20%20red%3A%20%7B%0A%20%20%20%20color%3A%20'red'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20LotsOfStyles%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigblue%7D%3Ejust%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigblue%2C%20styles.red%5D%7D%3Ebigblue%2C%20then%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigblue%5D%7D%3Ered%2C%20then%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfStyles)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>One common pattern is to make your component accept a <code>style</code> prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.</p>
|
||||
<p>There are a lot more ways to customize text style. Check out the <a href="/react-native/docs/0.10/text">Text component reference</a> for a complete list.</p>
|
||||
|
||||
+12
-12
@@ -39,6 +39,17 @@
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">bigblue</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'blue'</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">30</span>,
|
||||
},
|
||||
<span class="hljs-attr">red</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LotsOfStyles</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -52,20 +63,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">bigblue</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'blue'</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">30</span>,
|
||||
},
|
||||
<span class="hljs-attr">red</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-comment">// skip this line if using Create React Native App</span>
|
||||
AppRegistry.registerComponent(<span class="hljs-string">'AwesomeProject'</span>, () => LotsOfStyles);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20LotsOfStyles%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigblue%7D%3Ejust%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigblue%2C%20styles.red%5D%7D%3Ebigblue%2C%20then%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigblue%5D%7D%3Ered%2C%20then%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20bigblue%3A%20%7B%0A%20%20%20%20color%3A%20'blue'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20fontSize%3A%2030%2C%0A%20%20%7D%2C%0A%20%20red%3A%20%7B%0A%20%20%20%20color%3A%20'red'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfStyles)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20bigblue%3A%20%7B%0A%20%20%20%20color%3A%20'blue'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20fontSize%3A%2030%2C%0A%20%20%7D%2C%0A%20%20red%3A%20%7B%0A%20%20%20%20color%3A%20'red'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20LotsOfStyles%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigblue%7D%3Ejust%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigblue%2C%20styles.red%5D%7D%3Ebigblue%2C%20then%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigblue%5D%7D%3Ered%2C%20then%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfStyles)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>One common pattern is to make your component accept a <code>style</code> prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.</p>
|
||||
<p>There are a lot more ways to customize text style. Check out the <a href="/react-native/docs/0.10/text">Text component reference</a> for a complete list.</p>
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
ToastAndroid.showWithGravity(
|
||||
<span class="hljs-string">'All Your Base Are Belong To Us'</span>,
|
||||
ToastAndroid.SHORT,
|
||||
ToastAndroid.CENTER
|
||||
ToastAndroid.CENTER,
|
||||
);
|
||||
ToastAndroid.showWithGravityAndOffset(
|
||||
<span class="hljs-string">'A wild toast appeared!'</span>,
|
||||
ToastAndroid.LONG,
|
||||
ToastAndroid.BOTTOM,
|
||||
<span class="hljs-number">25</span>,
|
||||
<span class="hljs-number">50</span>
|
||||
<span class="hljs-number">50</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -59,7 +59,7 @@ ToastAndroid.showWithGravityAndOffset(
|
||||
duration,
|
||||
gravity,
|
||||
xOffset,
|
||||
yOffset
|
||||
yOffset,
|
||||
);
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" 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>Properties</h2>
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
ToastAndroid.showWithGravity(
|
||||
<span class="hljs-string">'All Your Base Are Belong To Us'</span>,
|
||||
ToastAndroid.SHORT,
|
||||
ToastAndroid.CENTER
|
||||
ToastAndroid.CENTER,
|
||||
);
|
||||
ToastAndroid.showWithGravityAndOffset(
|
||||
<span class="hljs-string">'A wild toast appeared!'</span>,
|
||||
ToastAndroid.LONG,
|
||||
ToastAndroid.BOTTOM,
|
||||
<span class="hljs-number">25</span>,
|
||||
<span class="hljs-number">50</span>
|
||||
<span class="hljs-number">50</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -59,7 +59,7 @@ ToastAndroid.showWithGravityAndOffset(
|
||||
duration,
|
||||
gravity,
|
||||
xOffset,
|
||||
yOffset
|
||||
yOffset,
|
||||
);
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" 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>Properties</h2>
|
||||
|
||||
@@ -34,14 +34,14 @@
|
||||
}
|
||||
});
|
||||
</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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you. The instructions are a bit different depending on whether you used <code>create-react-native-app</code> or <code>react-native init</code> to create your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="create-react-native-app-projects"></a><a href="#create-react-native-app-projects" 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>Create React Native App projects</h2>
|
||||
<p>Upgrading your Create React Native App project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md">this document</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#updating-to-new-releases">CRNA user guide</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="expo-projects"></a><a href="#expo-projects" 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>Expo projects</h2>
|
||||
<p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="projects-built-with-native-code"></a><a href="#projects-built-with-native-code" 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>Projects built with native code</h2>
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
<p>
|
||||
This section only applies to projects made with <code>react-native init</code> or to those made with Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.
|
||||
This section only applies to projects made with <code>react-native init</code> or to those made with code>expo init</code> or Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
<p>Because React Native projects built with native code are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
@@ -67,6 +67,10 @@
|
||||
<blockquote>
|
||||
<p>You may specify a React Native version by passing an argument: <code>react-native-git-upgrade X.Y.Z</code></p>
|
||||
</blockquote>
|
||||
<p>Upon completion, run the following command to find your corresponding git patch file.</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> ls <span class="hljs-variable">$TMPDIR</span>/react-native-git-upgrade</span>
|
||||
</code></pre>
|
||||
<p>To apply the git patch, run <code>git apply <path to patch></code> inside your project folder.</p>
|
||||
<p>The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" 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>4. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
@@ -118,7 +122,7 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" 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>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.13 to 0.14, or 0.28 to 0.29. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/running-on-device">← Running On Device</a><a class="docs-next button" href="/react-native/docs/0.10/troubleshooting">Troubleshooting →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -34,14 +34,14 @@
|
||||
}
|
||||
});
|
||||
</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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you. The instructions are a bit different depending on whether you used <code>create-react-native-app</code> or <code>react-native init</code> to create your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="create-react-native-app-projects"></a><a href="#create-react-native-app-projects" 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>Create React Native App projects</h2>
|
||||
<p>Upgrading your Create React Native App project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md">this document</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#updating-to-new-releases">CRNA user guide</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="expo-projects"></a><a href="#expo-projects" 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>Expo projects</h2>
|
||||
<p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="projects-built-with-native-code"></a><a href="#projects-built-with-native-code" 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>Projects built with native code</h2>
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
<p>
|
||||
This section only applies to projects made with <code>react-native init</code> or to those made with Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.
|
||||
This section only applies to projects made with <code>react-native init</code> or to those made with code>expo init</code> or Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
<p>Because React Native projects built with native code are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
@@ -67,6 +67,10 @@
|
||||
<blockquote>
|
||||
<p>You may specify a React Native version by passing an argument: <code>react-native-git-upgrade X.Y.Z</code></p>
|
||||
</blockquote>
|
||||
<p>Upon completion, run the following command to find your corresponding git patch file.</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> ls <span class="hljs-variable">$TMPDIR</span>/react-native-git-upgrade</span>
|
||||
</code></pre>
|
||||
<p>To apply the git patch, run <code>git apply <path to patch></code> inside your project folder.</p>
|
||||
<p>The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" 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>4. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
@@ -118,7 +122,7 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" 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>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.13 to 0.14, or 0.28 to 0.29. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/running-on-device">← Running On Device</a><a class="docs-next button" href="/react-native/docs/0.10/troubleshooting">Troubleshooting →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystate-ios-android"></a><a href="#accessibilitystate-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>accessibilityState (iOS, Android)</h4>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-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>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
@@ -104,7 +104,7 @@
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityState</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" 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>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystate-ios-android"></a><a href="#accessibilitystate-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>accessibilityState (iOS, Android)</h4>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-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>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
@@ -104,7 +104,7 @@
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityState</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" 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>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
@@ -28,7 +28,7 @@
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
@@ -28,7 +28,7 @@
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>),
|
||||
},
|
||||
]
|
||||
],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -53,7 +53,7 @@
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function">(<span class="hljs-params">password</span>) =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password),
|
||||
},
|
||||
],
|
||||
<span class="hljs-string">'secure-text'</span>
|
||||
<span class="hljs-string">'secure-text'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -62,7 +62,7 @@
|
||||
<span class="hljs-literal">null</span>,
|
||||
(text) => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Your username is '</span> + text),
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-string">'default'</span>
|
||||
<span class="hljs-string">'default'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -103,7 +103,7 @@
|
||||
[callbackOrButtons],
|
||||
[type],
|
||||
[defaultValue],
|
||||
[keyboardType]
|
||||
[keyboardType],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>),
|
||||
},
|
||||
]
|
||||
],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -53,7 +53,7 @@
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function">(<span class="hljs-params">password</span>) =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password),
|
||||
},
|
||||
],
|
||||
<span class="hljs-string">'secure-text'</span>
|
||||
<span class="hljs-string">'secure-text'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -62,7 +62,7 @@
|
||||
<span class="hljs-literal">null</span>,
|
||||
(text) => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Your username is '</span> + text),
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-string">'default'</span>
|
||||
<span class="hljs-string">'default'</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
|
||||
@@ -103,7 +103,7 @@
|
||||
[callbackOrButtons],
|
||||
[type],
|
||||
[defaultValue],
|
||||
[keyboardType]
|
||||
[keyboardType],
|
||||
);
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
{
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
}
|
||||
},
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.11/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
{
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
}
|
||||
},
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.11/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
Animated.spring(
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}} <span class="hljs-comment">// Back to zero</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}}, <span class="hljs-comment">// Back to zero</span>
|
||||
).start();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
Animated.spring(
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}} <span class="hljs-comment">// Back to zero</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}}, <span class="hljs-comment">// Back to zero</span>
|
||||
).start();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -169,7 +169,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.11/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<p><a href="/react-native/docs/0.11/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -256,7 +256,7 @@ Animated.timing(opacity, {
|
||||
},
|
||||
},
|
||||
],
|
||||
{useNativeDriver: true} // <-- Add this
|
||||
{useNativeDriver: true}, // <-- Add this
|
||||
)}>
|
||||
{content}
|
||||
</Animated.ScrollView>
|
||||
|
||||
@@ -169,7 +169,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.11/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<p><a href="/react-native/docs/0.11/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -256,7 +256,7 @@ Animated.timing(opacity, {
|
||||
},
|
||||
},
|
||||
],
|
||||
{useNativeDriver: true} // <-- Add this
|
||||
{useNativeDriver: true}, // <-- Add this
|
||||
)}>
|
||||
{content}
|
||||
</Animated.ScrollView>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<p><strong>Step 2:</strong> Create a <code>local.properties</code> file in the <code>android</code> directory of your react-native app with the following contents:</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">sdk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-sdk-macosx
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r10e
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r17b
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="download-links-for-android-ndk"></a><a href="#download-links-for-android-ndk" 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>Download links for Android NDK</h4>
|
||||
<ol>
|
||||
@@ -96,13 +96,13 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
rootProject.projectDir, <span class="hljs-string">'../node_modules/react-native/ReactAndroid'</span>)
|
||||
...
|
||||
</code></pre>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>compile 'com.facebook.react:react-native:+'</code> with <code>compile project(':ReactAndroid')</code>:</p>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>implementation 'com.facebook.react:react-native:+'</code> with <code>implementation project(':ReactAndroid')</code>:</p>
|
||||
<pre><code class="hljs css language-gradle">...
|
||||
<span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
implementation <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
implementation <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
implementation <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
|
||||
...
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<p><strong>Step 2:</strong> Create a <code>local.properties</code> file in the <code>android</code> directory of your react-native app with the following contents:</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">sdk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-sdk-macosx
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r10e
|
||||
ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/android-ndk-r17b
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="download-links-for-android-ndk"></a><a href="#download-links-for-android-ndk" 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>Download links for Android NDK</h4>
|
||||
<ol>
|
||||
@@ -96,13 +96,13 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
rootProject.projectDir, <span class="hljs-string">'../node_modules/react-native/ReactAndroid'</span>)
|
||||
...
|
||||
</code></pre>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>compile 'com.facebook.react:react-native:+'</code> with <code>compile project(':ReactAndroid')</code>:</p>
|
||||
<p>Modify your <code>android/app/build.gradle</code> to use the <code>:ReactAndroid</code> project instead of the pre-compiled library, e.g. - replace <code>implementation 'com.facebook.react:react-native:+'</code> with <code>implementation project(':ReactAndroid')</code>:</p>
|
||||
<pre><code class="hljs css language-gradle">...
|
||||
<span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
implementation <span class="hljs-keyword">fileTree</span>(dir: <span class="hljs-string">'libs'</span>, <span class="hljs-keyword">include</span>: [<span class="hljs-string">'*.jar'</span>])
|
||||
implementation <span class="hljs-string">'com.android.support:appcompat-v7:26.0.2'</span>
|
||||
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
implementation <span class="hljs-keyword">project</span>(<span class="hljs-string">':ReactAndroid'</span>)
|
||||
|
||||
...
|
||||
}
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -223,7 +223,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -223,7 +223,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -144,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -194,7 +194,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -144,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
const RCTCustomWebView = requireNativeComponent(
|
||||
'RCTCustomWebView',
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
WebView.extraNativeComponentConfig,
|
||||
);
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -194,7 +194,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
...WebView.extraNativeComponentConfig.nativeOnly,
|
||||
<span class="hljs-attr">onScrollToBottom</span>: <span class="hljs-literal">true</span>,
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></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'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'));
|
||||
|
||||
@@ -81,6 +81,18 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<blockquote>
|
||||
<p>Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="safari-developer-tools"></a><a href="#safari-developer-tools" 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>Safari Developer Tools</h2>
|
||||
<p>You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".</p>
|
||||
<ul>
|
||||
<li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select "Show Develop menu in menu bar"</code></li>
|
||||
<li>Select your app's JSContext: <code>Develop → Simulator → JSContext</code></li>
|
||||
<li>Safari's Web Inspector should open which has a Console and a Debugger</li>
|
||||
</ul>
|
||||
<p>However, there are some disadvantages:</p>
|
||||
<ol>
|
||||
<li>No sourcemaps when debugging</li>
|
||||
<li>Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-developer-tools"></a><a href="#react-developer-tools" 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>React Developer Tools</h2>
|
||||
<p>You can use <a href="https://github.com/facebook/react-devtools/tree/master/packages/react-devtools">the standalone version of React Developer Tools</a> to debug the React component hierarchy. To use it, install the <code>react-devtools</code> package globally:</p>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> -g react-devtools
|
||||
|
||||
@@ -81,6 +81,18 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<blockquote>
|
||||
<p>Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" id="safari-developer-tools"></a><a href="#safari-developer-tools" 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>Safari Developer Tools</h2>
|
||||
<p>You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".</p>
|
||||
<ul>
|
||||
<li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select "Show Develop menu in menu bar"</code></li>
|
||||
<li>Select your app's JSContext: <code>Develop → Simulator → JSContext</code></li>
|
||||
<li>Safari's Web Inspector should open which has a Console and a Debugger</li>
|
||||
</ul>
|
||||
<p>However, there are some disadvantages:</p>
|
||||
<ol>
|
||||
<li>No sourcemaps when debugging</li>
|
||||
<li>Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-developer-tools"></a><a href="#react-developer-tools" 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>React Developer Tools</h2>
|
||||
<p>You can use <a href="https://github.com/facebook/react-devtools/tree/master/packages/react-devtools">the standalone version of React Developer Tools</a> to debug the React component hierarchy. To use it, install the <code>react-devtools</code> package globally:</p>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> -g react-devtools
|
||||
|
||||
@@ -233,7 +233,7 @@ npm start
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="java-development-kit"></a><a href="#java-development-kit" 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8 or newer</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8 or newer</a> as an alternative.</p>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8</a> as an alternative.</p>
|
||||
<p><block class="native mac linux windows android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android-development-environment"></a><a href="#android-development-environment" 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>Android development environment</h3>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p>
|
||||
@@ -270,28 +270,13 @@ npm start
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are checked:</p>
|
||||
<ul>
|
||||
<li><code>Android SDK Platform 27</code></li>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
<li><code>Intel x86 Atom_64 System Image</code> or <code>Google APIs Intel x86 Atom System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>26.0.3</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>27.0.3</code> is selected.</p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
@@ -353,29 +338,19 @@ npm start
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" 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>Using a virtual device</h3>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Oreo</strong> API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target.</p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Oreo</strong> API Level 27 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
|
||||
@@ -233,7 +233,7 @@ npm start
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="java-development-kit"></a><a href="#java-development-kit" 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8 or newer</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8 or newer</a> as an alternative.</p>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install Oracle JDK 8</a> if needed. You can also use <a href="http://openjdk.java.net/install/">OpenJDK 8</a> as an alternative.</p>
|
||||
<p><block class="native mac linux windows android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android-development-environment"></a><a href="#android-development-environment" 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>Android development environment</h3>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p>
|
||||
@@ -270,28 +270,13 @@ npm start
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are checked:</p>
|
||||
<ul>
|
||||
<li><code>Android SDK Platform 27</code></li>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
<li><code>Intel x86 Atom_64 System Image</code> or <code>Google APIs Intel x86 Atom System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>26.0.3</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 26.0.3 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>27.0.3</code> is selected.</p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
@@ -353,29 +338,19 @@ npm start
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" 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>Using a virtual device</h3>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Oreo</strong> API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target.</p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Oreo</strong> API Level 27 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow <a href="https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
|
||||
@@ -57,7 +57,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
|
||||
<p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="flex-dimensions"></a><a href="#flex-dimensions" 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>Flex Dimensions</h2>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<blockquote>
|
||||
<p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -57,7 +57,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
|
||||
<p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="flex-dimensions"></a><a href="#flex-dimensions" 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>Flex Dimensions</h2>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<p>Use <code>flex</code> in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p>
|
||||
<blockquote>
|
||||
<p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
<pre><code class="hljs">.
|
||||
├── <span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.js</span>
|
||||
└── <span class="hljs-selector-tag">img</span>
|
||||
├── check<span class="hljs-selector-class">.png</span>
|
||||
├── check@<span class="hljs-number">2</span>x<span class="hljs-selector-class">.png</span>
|
||||
└── check@<span class="hljs-number">3</span>x<span class="hljs-selector-class">.png</span>
|
||||
</code></pre>
|
||||
@@ -163,7 +164,7 @@ var icon = this.props.active
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.11/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ImageBackground</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{...}</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{width:</span> '<span class="hljs-attr">100</span>%', <span class="hljs-attr">height:</span> '<span class="hljs-attr">100</span>%'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Inside<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
<pre><code class="hljs">.
|
||||
├── <span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.js</span>
|
||||
└── <span class="hljs-selector-tag">img</span>
|
||||
├── check<span class="hljs-selector-class">.png</span>
|
||||
├── check@<span class="hljs-number">2</span>x<span class="hljs-selector-class">.png</span>
|
||||
└── check@<span class="hljs-number">3</span>x<span class="hljs-selector-class">.png</span>
|
||||
</code></pre>
|
||||
@@ -163,7 +164,7 @@ var icon = this.props.active
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.11/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ImageBackground</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{...}</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{width:</span> '<span class="hljs-attr">100</span>%', <span class="hljs-attr">height:</span> '<span class="hljs-attr">100</span>%'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Inside<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
|
||||
@@ -465,10 +465,10 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<h2><a class="anchor" aria-hidden="true" id="adding-react-native-to-your-app-1"></a><a href="#adding-react-native-to-your-app-1" 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>Adding React Native to your app</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-maven"></a><a href="#configuring-maven" 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>Configuring maven</h3>
|
||||
<p>Add the React Native dependency to your app's <code>build.gradle</code> file:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:23.0.1'</span>
|
||||
<pre><code class="hljs">dependencies {
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">'com.android.support:appcompat-v7:27.1.1'</span>
|
||||
...
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -546,7 +546,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use <code>startActivityForResult</code>, we need to pass the result to the <code>onActivityResult</code> method of our <code>ReactInstanceManager</code> instance.</p>
|
||||
<pre><code class="hljs css language-java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onActivityResult</span><span class="hljs-params">(<span class="hljs-keyword">int</span> requestCode, <span class="hljs-keyword">int</span> resultCode, Intent data)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
|
||||
@@ -556,6 +556,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
}
|
||||
mReactInstanceManager.onActivityResult( <span class="hljs-keyword">this</span>, requestCode, resultCode, data );
|
||||
}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-reactrootview"></a><a href="#the-magic-reactrootview" 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>The Magic: <code>ReactRootView</code></h4>
|
||||
|
||||
@@ -465,10 +465,10 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<h2><a class="anchor" aria-hidden="true" id="adding-react-native-to-your-app-1"></a><a href="#adding-react-native-to-your-app-1" 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>Adding React Native to your app</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-maven"></a><a href="#configuring-maven" 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>Configuring maven</h3>
|
||||
<p>Add the React Native dependency to your app's <code>build.gradle</code> file:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">dependencies</span> {
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">'com.android.support:appcompat-v7:23.0.1'</span>
|
||||
<pre><code class="hljs">dependencies {
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">'com.android.support:appcompat-v7:27.1.1'</span>
|
||||
...
|
||||
<span class="hljs-keyword">compile</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
<span class="hljs-keyword">implementation</span> <span class="hljs-string">"com.facebook.react:react-native:+"</span> <span class="hljs-comment">// From node_modules</span>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -546,7 +546,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use <code>startActivityForResult</code>, we need to pass the result to the <code>onActivityResult</code> method of our <code>ReactInstanceManager</code> instance.</p>
|
||||
<pre><code class="hljs css language-java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onActivityResult</span><span class="hljs-params">(<span class="hljs-keyword">int</span> requestCode, <span class="hljs-keyword">int</span> resultCode, Intent data)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
|
||||
@@ -556,6 +556,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
}
|
||||
}
|
||||
}
|
||||
mReactInstanceManager.onActivityResult( <span class="hljs-keyword">this</span>, requestCode, resultCode, data );
|
||||
}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-reactrootview"></a><a href="#the-magic-reactrootview" 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>The Magic: <code>ReactRootView</code></h4>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</ol>
|
||||
<p>You can generally figure out who may be relevant for a given issue by looking at the <a href="https://github.com/facebook/react-native/blob/master/.github/CODEOWNERS">CODEOWNERS</a> file.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="stale-issues"></a><a href="#stale-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>Stale issues</h3>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Simply commenting that the issue still exists is not very compelling (it's rare for critical, release blocking issues to have no activity for two months!). In order to make a good case for reopening the issue, you may need to do a bit of work:</p>
|
||||
<ul>
|
||||
<li>Can the issue be reproduced on the latest release candidate? Post a comment with the version you tested.</li>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</ol>
|
||||
<p>You can generally figure out who may be relevant for a given issue by looking at the <a href="https://github.com/facebook/react-native/blob/master/.github/CODEOWNERS">CODEOWNERS</a> file.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="stale-issues"></a><a href="#stale-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>Stale issues</h3>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why.</p>
|
||||
<p>Simply commenting that the issue still exists is not very compelling (it's rare for critical, release blocking issues to have no activity for two months!). In order to make a good case for reopening the issue, you may need to do a bit of work:</p>
|
||||
<ul>
|
||||
<li>Can the issue be reproduced on the latest release candidate? Post a comment with the version you tested.</li>
|
||||
|
||||
@@ -126,7 +126,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView);
|
||||
|
||||
module.exports = MapView;
|
||||
</span></code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to <code>requireNativeComponent</code> from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code.</p>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -255,7 +255,7 @@ render() {
|
||||
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<p>Note that all <code>RCTBubblingEventBlock</code> must be prefixed with <code>on</code>. Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<pre><code class="hljs css language-objectivec{9,17,31-48}"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
|
||||
@@ -126,7 +126,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView);
|
||||
|
||||
module.exports = MapView;
|
||||
</span></code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to <code>requireNativeComponent</code> from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code.</p>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -255,7 +255,7 @@ render() {
|
||||
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<p>Note that all <code>RCTBubblingEventBlock</code> must be prefixed with <code>on</code>. Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
|
||||
<pre><code class="hljs css language-objectivec{9,17,31-48}"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
|
||||
@@ -204,7 +204,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
},
|
||||
(x, y, width, height) => {
|
||||
<span class="hljs-built_in">console</span>.log(x + <span class="hljs-string">':'</span> + y + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
<p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> {relativeX, relativeY, width, height} = <span class="hljs-keyword">await</span> UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>
|
||||
<span class="hljs-number">100</span>,
|
||||
);
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(relativeX + <span class="hljs-string">':'</span> + relativeY + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
|
||||
@@ -204,7 +204,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
},
|
||||
(x, y, width, height) => {
|
||||
<span class="hljs-built_in">console</span>.log(x + <span class="hljs-string">':'</span> + y + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
}
|
||||
},
|
||||
);
|
||||
</code></pre>
|
||||
<p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> {relativeX, relativeY, width, height} = <span class="hljs-keyword">await</span> UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>
|
||||
<span class="hljs-number">100</span>,
|
||||
);
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(relativeX + <span class="hljs-string">':'</span> + relativeY + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -33,7 +33,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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
</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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<p>This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
@@ -117,14 +117,14 @@ CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <spa
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.getTime()
|
||||
date.getTime(),
|
||||
); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</p>
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.toISOString()
|
||||
date.toISOString(),
|
||||
); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -33,7 +33,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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
</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/native-modules-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs to access a platform API and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<p>This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
@@ -117,14 +117,14 @@ CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <spa
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.getTime()
|
||||
date.getTime(),
|
||||
); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</p>
|
||||
<pre><code class="hljs css language-javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.toISOString()
|
||||
date.toISOString(),
|
||||
); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMoviesFromApi</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> fetch(
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>,
|
||||
);
|
||||
<span class="hljs-keyword">let</span> responseJson = <span class="hljs-keyword">await</span> response.json();
|
||||
<span class="hljs-keyword">return</span> responseJson.movies;
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMoviesFromApi</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> fetch(
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>
|
||||
<span class="hljs-string">'https://facebook.github.io/react-native/movies.json'</span>,
|
||||
);
|
||||
<span class="hljs-keyword">let</span> responseJson = <span class="hljs-keyword">await</span> response.json();
|
||||
<span class="hljs-keyword">return</span> responseJson.movies;
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<span class="hljs-attr">message</span>:
|
||||
<span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>,
|
||||
}
|
||||
},
|
||||
);
|
||||
<span class="hljs-keyword">if</span> (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'You can use the camera'</span>);
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<span class="hljs-attr">message</span>:
|
||||
<span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>,
|
||||
}
|
||||
},
|
||||
);
|
||||
<span class="hljs-keyword">if</span> (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'You can use the camera'</span>);
|
||||
|
||||
@@ -102,6 +102,7 @@ BigButton.android.js
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">const</span> BigButton = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./BigButton'</span>);
|
||||
</code></pre>
|
||||
<p>React Native will automatically pick up the right file based on the running platform.</p>
|
||||
<p>If you share your React Native code with a website, you might as well use the <code>BigButton.native.js</code> so that both iOS and Android will use this file, while the website will use <code>BigButton.js</code>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/components-and-apis">← Components and APIs</a><a class="docs-next button" href="/react-native/docs/0.11/navigation">Navigating Between Screens →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -102,6 +102,7 @@ BigButton.android.js
|
||||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">const</span> BigButton = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./BigButton'</span>);
|
||||
</code></pre>
|
||||
<p>React Native will automatically pick up the right file based on the running platform.</p>
|
||||
<p>If you share your React Native code with a website, you might as well use the <code>BigButton.native.js</code> so that both iOS and Android will use this file, while the website will use <code>BigButton.js</code>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/components-and-apis">← Components and APIs</a><a class="docs-next button" href="/react-native/docs/0.11/navigation">Navigating Between Screens →</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'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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg'%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20Bananas)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,7 +61,9 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Greeting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{alignItems:</span> '<span class="hljs-attr">center</span>'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -80,7 +82,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.11/view"><code>View</code></a> component. A <a href="/react-native/docs/0.11/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg'%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20Bananas)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,7 +61,9 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Greeting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{alignItems:</span> '<span class="hljs-attr">center</span>'}}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello {this.props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -80,7 +82,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.11/view"><code>View</code></a> component. A <a href="/react-native/docs/0.11/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
|
||||
+12
-9
@@ -42,20 +42,23 @@
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Blink</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = {<span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span>};
|
||||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span> };
|
||||
|
||||
<span class="hljs-comment">// Toggle the state every second</span>
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> { <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText };
|
||||
});
|
||||
}, <span class="hljs-number">1000</span>);
|
||||
setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =></span> (
|
||||
{ <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText }
|
||||
))
|
||||
), <span class="hljs-number">1000</span>);
|
||||
}
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">let</span> display = <span class="hljs-keyword">this</span>.state.isShowingText ? <span class="hljs-keyword">this</span>.props.text : <span class="hljs-string">' '</span>;
|
||||
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.state.isShowingText) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{display}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{this.props.text}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -75,7 +78,7 @@
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BisShowingText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20return%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.isShowingText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20isShowingText%3A%20true%20%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20(%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%0A%20%20%20%20%20%20))%0A%20%20%20%20)%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20if%20(!this.state.isShowingText)%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bthis.props.text%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/">Mobx</a> to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling <code>setState</code> directly.</p>
|
||||
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user