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 a25a60f430a47e3e6ee29ccbeea5ec3ed15ec8a6
This commit is contained in:
Website Deployment Script
@@ -87,7 +87,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">YourApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> YourApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>, <span class="hljs-attr">justifyContent:</span> "<span class="hljs-attr">center</span>", <span class="hljs-attr">alignItems:</span> "<span class="hljs-attr">center</span>" }}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||||
@@ -96,10 +96,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> YourApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20YourApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -132,7 +134,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">HelloWorldApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> HelloWorldApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
|
||||
<span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>,
|
||||
@@ -143,10 +145,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorldApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World Function Component"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20HelloWorldApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20world!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20HelloWorldApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20world!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20HelloWorldApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -162,7 +166,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</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">HelloWorldApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorldApp</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">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
|
||||
@@ -176,10 +180,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorldApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World Class Component"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20HelloWorldApp%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%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20alignItems%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%2C%20world!%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"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20HelloWorldApp%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%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20alignItems%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%2C%20world!%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%20HelloWorldApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">YourApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> YourApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>, <span class="hljs-attr">justifyContent:</span> "<span class="hljs-attr">center</span>", <span class="hljs-attr">alignItems:</span> "<span class="hljs-attr">center</span>" }}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||||
@@ -96,10 +96,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> YourApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20YourApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -132,7 +134,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">HelloWorldApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> HelloWorldApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
|
||||
<span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>,
|
||||
@@ -143,10 +145,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorldApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World Function Component"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20HelloWorldApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20world!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20HelloWorldApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20world!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20HelloWorldApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -162,7 +166,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</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">HelloWorldApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorldApp</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">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
|
||||
@@ -176,10 +180,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorldApp;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World Class Component"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20HelloWorldApp%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%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20alignItems%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%2C%20world!%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"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20HelloWorldApp%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%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20alignItems%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello%2C%20world!%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%20HelloWorldApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">PizzaTranslator</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> PizzaTranslator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [text, setText] = useState(<span class="hljs-string">''</span>);
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{padding:</span> <span class="hljs-attr">10</span>}}></span>
|
||||
@@ -89,10 +89,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default PizzaTranslator;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Handling Text Input"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20PizzaTranslator()%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20useState('')%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%7Btext%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%7Btext.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20PizzaTranslator%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20useState('')%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%7Btext%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%7Btext.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20PizzaTranslator%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">PizzaTranslator</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> PizzaTranslator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [text, setText] = useState(<span class="hljs-string">''</span>);
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{padding:</span> <span class="hljs-attr">10</span>}}></span>
|
||||
@@ -89,10 +89,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default PizzaTranslator;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Handling Text Input"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20PizzaTranslator()%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20useState('')%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%7Btext%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%7Btext.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20PizzaTranslator%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20useState('')%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%7Btext%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%7Btext.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20PizzaTranslator%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { View, Text, Image, ScrollView, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<ScrollView>
|
||||
<Text>Some text</Text>
|
||||
@@ -121,10 +121,12 @@
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Text%2C%20Image%2C%20ScrollView%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%3CText%3ESome%20text%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3ESome%20more%20text%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat2.png'%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20200%2C%20height%3A%20200%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22You%20can%20type%20in%20me%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Text%2C%20Image%2C%20ScrollView%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%3CText%3ESome%20text%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3ESome%20more%20text%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat2.png'%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20200%2C%20height%3A%20200%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22You%20can%20type%20in%20me%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { View, Text, Image, ScrollView, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<ScrollView>
|
||||
<Text>Some text</Text>
|
||||
@@ -121,10 +121,12 @@
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Hello World"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Text%2C%20Image%2C%20ScrollView%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%3CText%3ESome%20text%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3ESome%20more%20text%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat2.png'%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20200%2C%20height%3A%20200%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22You%20can%20type%20in%20me%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Text%2C%20Image%2C%20ScrollView%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%3CText%3ESome%20text%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3ESome%20more%20text%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat2.png'%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20200%2C%20height%3A%20200%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22You%20can%20type%20in%20me%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
+66
-38
@@ -93,15 +93,17 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am your cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Your Cat"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -118,35 +120,41 @@
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Text <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Your component starts as a function:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>You can think of components as blueprints. Whatever a function component returns is rendered as a <strong>React element.</strong> React elements let you describe what you want to see on the screen.</p>
|
||||
<p>Here the <code>Cat</code> component will render a <code><Text></code> element:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>You can export your function component with JavaScript’s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export default</code></a> for use throughout your app like so:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="classical syntax" /></p>
|
||||
<p>Class components tend to be a bit more verbose than function components.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</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">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</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, I am your cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Your Cat"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Cat%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -172,11 +180,13 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>And as with function components, you can export your class component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="endBlock syntax" /></p>
|
||||
<blockquote>
|
||||
@@ -188,16 +198,18 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> name = <span class="hljs-string">"Maru"</span>;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am {name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Curly Braces"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20const%20name%20%3D%20%22Maru%22%3B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bname%7D!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20name%20%3D%20%22Maru%22%3B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bname%7D!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -213,21 +225,23 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFullName</span>(<span class="hljs-params">firstName, secondName, thirdName</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> firstName + <span class="hljs-string">" "</span> + secondName + <span class="hljs-string">" "</span> + thirdName;
|
||||
}
|
||||
<span class="hljs-keyword">const</span> getFullName = <span class="hljs-function">(<span class="hljs-params">firstName, secondName, thirdName</span>) =></span> {
|
||||
<span class="hljs-keyword">return</span> firstName + <span class="hljs-string">" "</span> + secondName + <span class="hljs-string">" "</span> + thirdName;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||||
Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Curly Braces"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20function%20getFullName(firstName%2C%20secondName%2C%20thirdName)%20%7B%0A%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20secondName%20%2B%20%22%20%22%20%2B%20thirdName%3B%0A%20%20%7D%0A%0A%20%20return%20(%0A%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20Hello%2C%20I%20am%20%7BgetFullName(%22Rum%22%2C%20%22Tum%22%2C%20%22Tugger%22)%7D!%0A%20%20%20%20%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20getFullName%20%3D%20(firstName%2C%20secondName%2C%20thirdName)%20%3D%3E%20%7B%0A%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20secondName%20%2B%20%22%20%22%20%2B%20thirdName%3B%0A%7D%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20Hello%2C%20I%20am%20%7BgetFullName(%22Rum%22%2C%20%22Tum%22%2C%20%22Tugger%22)%7D!%0A%20%20%20%20%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -249,7 +263,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am...<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -264,10 +278,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cat;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Custom Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am...%3C%2FText%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22Name%20me!%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am...%3C%2FText%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22Name%20me!%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -299,7 +315,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>I am also a cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -307,7 +323,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cafe</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cafe = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Welcome!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -317,10 +333,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Multiple Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Afunction%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EI%20am%20also%20a%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EWelcome!%3C%2FText%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EI%20am%20also%20a%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EWelcome!%3C%2FText%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -339,7 +357,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params">props</span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am {props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -347,7 +365,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cafe</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cafe = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View>
|
||||
<Cat name="Maru" />
|
||||
@@ -356,10 +374,12 @@
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Multiple Props"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Afunction%20Cat(props)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bprops.name%7D!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Maru%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Jellylorum%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bprops.name%7D!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Maru%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Jellylorum%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -375,7 +395,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View, Image } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CatApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> CatApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Image</span>
|
||||
@@ -386,10 +406,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default CatApp;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Props"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20CatApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20%22https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat1.png%22%7D%7D%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%20200%7D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aconst%20CatApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20%22https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat1.png%22%7D%7D%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%20200%7D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20CatApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -427,7 +449,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { Button, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params">props</span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {
|
||||
<span class="hljs-keyword">const</span> [isHungry, setIsHungry] = useState(<span class="hljs-literal">true</span>);
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -446,7 +468,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
export default function Cafe() {
|
||||
const Cafe = () => {
|
||||
return (
|
||||
<>
|
||||
<Cat name="Munkustrap" />
|
||||
@@ -454,10 +476,12 @@ export default function Cafe() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="State"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Afunction%20Cat(props)%20%7B%0A%20%20const%20%5BisHungry%2C%20setIsHungry%5D%20%3D%20useState(true)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20I%20am%20%7Bprops.name%7D%2C%20and%20I%20am%20%7BisHungry%20%3F%20%22hungry%22%20%3A%20%22full%22%7D!%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setIsHungry(false)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20disabled%3D%7B!isHungry%7D%0A%20%20%20%20%20%20%20%20title%3D%7BisHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BisHungry%2C%20setIsHungry%5D%20%3D%20useState(true)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20I%20am%20%7Bprops.name%7D%2C%20and%20I%20am%20%7BisHungry%20%3F%20%22hungry%22%20%3A%20%22full%22%7D!%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setIsHungry(false)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20disabled%3D%7B!isHungry%7D%0A%20%20%20%20%20%20%20%20title%3D%7BisHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -473,10 +497,10 @@ export default function Cafe() {
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then you declare the component’s state by calling <code>useState</code> inside its function. In this example, <code>useState</code> creates an <code>isHungry</code> state variable:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">[</span>isHungry<span class="token punctuation">,</span> setIsHungry<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>You can use <code>useState</code> to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with <code>const [timesPetted, setTimesPetted] = useState(0)</code>!</p>
|
||||
@@ -506,21 +530,21 @@ export default function Cafe() {
|
||||
<p>You might’ve noticed that although <code>isHungry</code> is a <a href="https://developer.mozilla.org/Web/JavaScript/Reference/Statements/const">const</a>, it is seemingly reassignable! What is happening is when a state-setting function like <code>setIsHungry</code> is called, its component will re-render. In this case the <code>Cat</code> function will run again—and this time, <code>useState</code> will give us the next value of <code>isHungry</code>.</p>
|
||||
</blockquote>
|
||||
<p>Finally, put your cats inside a <code>Cafe</code> component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Cafe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cafe</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Cat</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Munkustrap<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Cat</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Spot<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="classical syntax" /></p>
|
||||
<p>The older class components approach is a little different when it comes to state.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { Button, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = { <span class="hljs-attr">isHungry</span>: <span class="hljs-literal">true</span> };
|
||||
|
||||
render(props) {
|
||||
@@ -544,7 +568,7 @@ export default function Cafe() {
|
||||
}
|
||||
}
|
||||
|
||||
export default class Cafe extends Component {
|
||||
class Cafe extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
@@ -554,10 +578,12 @@ export default class Cafe extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="State and Class Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20class%20Cat%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%20isHungry%3A%20true%20%7D%3B%0A%0A%20%20render(props)%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%3E%0A%20%20%20%20%20%20%20%20%20%20I%20am%20%7Bthis.props.name%7D%2C%20and%20I%20am%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.isHungry%20%3F%20%22%20hungry%22%20%3A%20%22%20full%22%7D!%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%20isHungry%3A%20false%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20disabled%3D%7B!this.state.isHungry%7D%0A%20%20%20%20%20%20%20%20%20%20title%3D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.isHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%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%0Aexport%20default%20class%20Cafe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%20isHungry%3A%20true%20%7D%3B%0A%0A%20%20render(props)%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%3E%0A%20%20%20%20%20%20%20%20%20%20I%20am%20%7Bthis.props.name%7D%2C%20and%20I%20am%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.isHungry%20%3F%20%22%20hungry%22%20%3A%20%22%20full%22%7D!%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%20isHungry%3A%20false%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20disabled%3D%7B!this.state.isHungry%7D%0A%20%20%20%20%20%20%20%20%20%20title%3D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.isHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%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%0Aclass%20Cafe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -607,7 +633,7 @@ export default class Cafe extends Component {
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Finally, put your cats inside a <code>Cafe</code> component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Cafe</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">Cafe</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -617,6 +643,8 @@ export default class Cafe extends Component {
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cafe<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="endBlock syntax" /></p>
|
||||
<blockquote>
|
||||
|
||||
@@ -93,15 +93,17 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am your cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Your Cat"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -118,35 +120,41 @@
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Text <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Your component starts as a function:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>You can think of components as blueprints. Whatever a function component returns is rendered as a <strong>React element.</strong> React elements let you describe what you want to see on the screen.</p>
|
||||
<p>Here the <code>Cat</code> component will render a <code><Text></code> element:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>You can export your function component with JavaScript’s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export default</code></a> for use throughout your app like so:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="classical syntax" /></p>
|
||||
<p>Class components tend to be a bit more verbose than function components.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</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">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</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, I am your cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Your Cat"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Cat%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -172,11 +180,13 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>And as with function components, you can export your class component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello, I am your cat!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cat<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="endBlock syntax" /></p>
|
||||
<blockquote>
|
||||
@@ -188,16 +198,18 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> name = <span class="hljs-string">"Maru"</span>;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am {name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Curly Braces"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20const%20name%20%3D%20%22Maru%22%3B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bname%7D!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20name%20%3D%20%22Maru%22%3B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bname%7D!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -213,21 +225,23 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getFullName</span>(<span class="hljs-params">firstName, secondName, thirdName</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> firstName + <span class="hljs-string">" "</span> + secondName + <span class="hljs-string">" "</span> + thirdName;
|
||||
}
|
||||
<span class="hljs-keyword">const</span> getFullName = <span class="hljs-function">(<span class="hljs-params">firstName, secondName, thirdName</span>) =></span> {
|
||||
<span class="hljs-keyword">return</span> firstName + <span class="hljs-string">" "</span> + secondName + <span class="hljs-string">" "</span> + thirdName;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||||
Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cat;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Curly Braces"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20function%20getFullName(firstName%2C%20secondName%2C%20thirdName)%20%7B%0A%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20secondName%20%2B%20%22%20%22%20%2B%20thirdName%3B%0A%20%20%7D%0A%0A%20%20return%20(%0A%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20Hello%2C%20I%20am%20%7BgetFullName(%22Rum%22%2C%20%22Tum%22%2C%20%22Tugger%22)%7D!%0A%20%20%20%20%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20getFullName%20%3D%20(firstName%2C%20secondName%2C%20thirdName)%20%3D%3E%20%7B%0A%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20secondName%20%2B%20%22%20%22%20%2B%20thirdName%3B%0A%7D%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20Hello%2C%20I%20am%20%7BgetFullName(%22Rum%22%2C%20%22Tum%22%2C%20%22Tugger%22)%7D!%0A%20%20%20%20%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -249,7 +263,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am...<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -264,10 +278,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cat;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Custom Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am...%3C%2FText%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22Name%20me!%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am...%3C%2FText%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22Name%20me!%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -299,7 +315,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>I am also a cat!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -307,7 +323,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cafe</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cafe = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Welcome!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -317,10 +333,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Multiple Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Afunction%20Cat()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EI%20am%20also%20a%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EWelcome!%3C%2FText%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EI%20am%20also%20a%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EWelcome!%3C%2FText%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -339,7 +357,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params">props</span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Hello, I am {props.name}!<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -347,7 +365,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cafe</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cafe = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View>
|
||||
<Cat name="Maru" />
|
||||
@@ -356,10 +374,12 @@
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Multiple Props"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Afunction%20Cat(props)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bprops.name%7D!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Maru%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Jellylorum%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bprops.name%7D!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Maru%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Jellylorum%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -375,7 +395,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View, Image } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CatApp</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> CatApp = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Image</span>
|
||||
@@ -386,10 +406,12 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
export default CatApp;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Props"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20CatApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20%22https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat1.png%22%7D%7D%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%20200%7D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aconst%20CatApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20%22https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat1.png%22%7D%7D%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%20200%7D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20CatApp%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -427,7 +449,7 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { Button, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Cat</span>(<span class="hljs-params">props</span>) </span>{
|
||||
<span class="hljs-keyword">const</span> Cat = <span class="hljs-function">(<span class="hljs-params">props</span>) =></span> {
|
||||
<span class="hljs-keyword">const</span> [isHungry, setIsHungry] = useState(<span class="hljs-literal">true</span>);
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -446,7 +468,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
export default function Cafe() {
|
||||
const Cafe = () => {
|
||||
return (
|
||||
<>
|
||||
<Cat name="Munkustrap" />
|
||||
@@ -454,10 +476,12 @@ export default function Cafe() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="State"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Afunction%20Cat(props)%20%7B%0A%20%20const%20%5BisHungry%2C%20setIsHungry%5D%20%3D%20useState(true)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20I%20am%20%7Bprops.name%7D%2C%20and%20I%20am%20%7BisHungry%20%3F%20%22hungry%22%20%3A%20%22full%22%7D!%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setIsHungry(false)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20disabled%3D%7B!isHungry%7D%0A%20%20%20%20%20%20%20%20title%3D%7BisHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20Cafe()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BisHungry%2C%20setIsHungry%5D%20%3D%20useState(true)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20I%20am%20%7Bprops.name%7D%2C%20and%20I%20am%20%7BisHungry%20%3F%20%22hungry%22%20%3A%20%22full%22%7D!%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setIsHungry(false)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20disabled%3D%7B!isHungry%7D%0A%20%20%20%20%20%20%20%20title%3D%7BisHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -473,10 +497,10 @@ export default function Cafe() {
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then you declare the component’s state by calling <code>useState</code> inside its function. In this example, <code>useState</code> creates an <code>isHungry</code> state variable:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cat</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">[</span>isHungry<span class="token punctuation">,</span> setIsHungry<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>You can use <code>useState</code> to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with <code>const [timesPetted, setTimesPetted] = useState(0)</code>!</p>
|
||||
@@ -506,21 +530,21 @@ export default function Cafe() {
|
||||
<p>You might’ve noticed that although <code>isHungry</code> is a <a href="https://developer.mozilla.org/Web/JavaScript/Reference/Statements/const">const</a>, it is seemingly reassignable! What is happening is when a state-setting function like <code>setIsHungry</code> is called, its component will re-render. In this case the <code>Cat</code> function will run again—and this time, <code>useState</code> will give us the next value of <code>isHungry</code>.</p>
|
||||
</blockquote>
|
||||
<p>Finally, put your cats inside a <code>Cafe</code> component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Cafe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Cafe</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Cat</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Munkustrap<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Cat</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Spot<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="classical syntax" /></p>
|
||||
<p>The older class components approach is a little different when it comes to state.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { Button, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cat</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = { <span class="hljs-attr">isHungry</span>: <span class="hljs-literal">true</span> };
|
||||
|
||||
render(props) {
|
||||
@@ -544,7 +568,7 @@ export default function Cafe() {
|
||||
}
|
||||
}
|
||||
|
||||
export default class Cafe extends Component {
|
||||
class Cafe extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
@@ -554,10 +578,12 @@ export default class Cafe extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Cafe;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="State and Class Components"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20class%20Cat%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%20isHungry%3A%20true%20%7D%3B%0A%0A%20%20render(props)%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%3E%0A%20%20%20%20%20%20%20%20%20%20I%20am%20%7Bthis.props.name%7D%2C%20and%20I%20am%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.isHungry%20%3F%20%22%20hungry%22%20%3A%20%22%20full%22%7D!%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%20isHungry%3A%20false%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20disabled%3D%7B!this.state.isHungry%7D%0A%20%20%20%20%20%20%20%20%20%20title%3D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.isHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%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%0Aexport%20default%20class%20Cafe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%20isHungry%3A%20true%20%7D%3B%0A%0A%20%20render(props)%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%3E%0A%20%20%20%20%20%20%20%20%20%20I%20am%20%7Bthis.props.name%7D%2C%20and%20I%20am%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.isHungry%20%3F%20%22%20hungry%22%20%3A%20%22%20full%22%7D!%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%20isHungry%3A%20false%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20disabled%3D%7B!this.state.isHungry%7D%0A%20%20%20%20%20%20%20%20%20%20title%3D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.isHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%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%0Aclass%20Cafe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20%20Cafe%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -607,7 +633,7 @@ export default class Cafe extends Component {
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Finally, put your cats inside a <code>Cafe</code> component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Cafe</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">Cafe</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -617,6 +643,8 @@ export default class Cafe extends Component {
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> Cafe<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><block class="endBlock syntax" /></p>
|
||||
<blockquote>
|
||||
|
||||
@@ -75,43 +75,45 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { FlatList, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FlatListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">FlatList</span>
|
||||
<span class="hljs-attr">data</span>=<span class="hljs-string">{[</span>
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Devin</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dan</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dominic</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jackson</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">James</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Joel</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">John</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jillian</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jimmy</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Julie</span>'},
|
||||
]}
|
||||
<span class="hljs-attr">renderItem</span>=<span class="hljs-string">{({item})</span> =></span> <span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>}
|
||||
/>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">22</span>
|
||||
},
|
||||
<span class="hljs-attr">item</span>: {
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">18</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">44</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> FlatListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">FlatList</span>
|
||||
<span class="hljs-attr">data</span>=<span class="hljs-string">{[</span>
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Devin</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dan</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dominic</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jackson</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">James</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Joel</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">John</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jillian</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jimmy</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Julie</span>'},
|
||||
]}
|
||||
<span class="hljs-attr">renderItem</span>=<span class="hljs-string">{({item})</span> =></span> <span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>}
|
||||
/>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
},
|
||||
})
|
||||
export default FlatListBasics;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="FlatList Basics"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20FlatList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FlatListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20%20%20data%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Devin'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dan'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dominic'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jackson'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'James'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Joel'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'John'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jillian'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jimmy'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Julie'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem.key%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20FlatList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20FlatListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Devin'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dan'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dominic'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jackson'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'James'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Joel'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'John'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jillian'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jimmy'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Julie'%7D%2C%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem.key%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20FlatListBasics%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -127,7 +129,28 @@ const styles = StyleSheet.create({
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { SectionList, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> SectionListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">22</span>
|
||||
},
|
||||
<span class="hljs-attr">sectionHeader</span>: {
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'rgba(247,247,247,1.0)'</span>,
|
||||
},
|
||||
<span class="hljs-attr">item</span>: {
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">18</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">44</span>,
|
||||
},
|
||||
})
|
||||
|
||||
<span class="hljs-keyword">const</span> SectionListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">SectionList</span>
|
||||
@@ -143,30 +166,11 @@ const styles = StyleSheet.create({
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22
|
||||
},
|
||||
sectionHeader: {
|
||||
paddingTop: 2,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingBottom: 2,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: 'rgba(247,247,247,1.0)',
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
},
|
||||
})
|
||||
export default SectionListBasics;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="SectionList Basics"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SectionList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20SectionListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CSectionList%0A%20%20%20%20%20%20%20%20%20%20sections%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'D'%2C%20data%3A%20%5B'Devin'%2C%20'Dan'%2C%20'Dominic'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'J'%2C%20data%3A%20%5B'Jackson'%2C%20'James'%2C%20'Jillian'%2C%20'Jimmy'%2C%20'Joel'%2C%20'John'%2C%20'Julie'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20renderSectionHeader%3D%7B(%7Bsection%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.sectionHeader%7D%3E%7Bsection.title%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(item%2C%20index)%20%3D%3E%20index%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20sectionHeader%3A%20%7B%0A%20%20%20%20paddingTop%3A%202%2C%0A%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20paddingRight%3A%2010%2C%0A%20%20%20%20paddingBottom%3A%202%2C%0A%20%20%20%20fontSize%3A%2014%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20backgroundColor%3A%20'rgba(247%2C247%2C247%2C1.0)'%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SectionList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20sectionHeader%3A%20%7B%0A%20%20%20%20paddingTop%3A%202%2C%0A%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20paddingRight%3A%2010%2C%0A%20%20%20%20paddingBottom%3A%202%2C%0A%20%20%20%20fontSize%3A%2014%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20backgroundColor%3A%20'rgba(247%2C247%2C247%2C1.0)'%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A%0Aconst%20SectionListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CSectionList%0A%20%20%20%20%20%20%20%20%20%20sections%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'D'%2C%20data%3A%20%5B'Devin'%2C%20'Dan'%2C%20'Dominic'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'J'%2C%20data%3A%20%5B'Jackson'%2C%20'James'%2C%20'Jillian'%2C%20'Jimmy'%2C%20'Joel'%2C%20'John'%2C%20'Julie'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20renderSectionHeader%3D%7B(%7Bsection%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.sectionHeader%7D%3E%7Bsection.title%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(item%2C%20index)%20%3D%3E%20index%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20SectionListBasics%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -75,43 +75,45 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { FlatList, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FlatListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">FlatList</span>
|
||||
<span class="hljs-attr">data</span>=<span class="hljs-string">{[</span>
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Devin</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dan</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dominic</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jackson</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">James</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Joel</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">John</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jillian</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jimmy</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Julie</span>'},
|
||||
]}
|
||||
<span class="hljs-attr">renderItem</span>=<span class="hljs-string">{({item})</span> =></span> <span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>}
|
||||
/>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">22</span>
|
||||
},
|
||||
<span class="hljs-attr">item</span>: {
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">18</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">44</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> FlatListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">FlatList</span>
|
||||
<span class="hljs-attr">data</span>=<span class="hljs-string">{[</span>
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Devin</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dan</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Dominic</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jackson</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">James</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Joel</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">John</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jillian</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Jimmy</span>'},
|
||||
{<span class="hljs-attr">key:</span> '<span class="hljs-attr">Julie</span>'},
|
||||
]}
|
||||
<span class="hljs-attr">renderItem</span>=<span class="hljs-string">{({item})</span> =></span> <span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>}
|
||||
/>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
},
|
||||
})
|
||||
export default FlatListBasics;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="FlatList Basics"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20FlatList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FlatListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20%20%20data%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Devin'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dan'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dominic'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jackson'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'James'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Joel'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'John'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jillian'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jimmy'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Julie'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem.key%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20FlatList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20FlatListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Devin'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dan'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Dominic'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jackson'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'James'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Joel'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'John'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jillian'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Jimmy'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7Bkey%3A%20'Julie'%7D%2C%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem.key%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20FlatListBasics%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -127,7 +129,28 @@ const styles = StyleSheet.create({
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { SectionList, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> SectionListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">22</span>
|
||||
},
|
||||
<span class="hljs-attr">sectionHeader</span>: {
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'rgba(247,247,247,1.0)'</span>,
|
||||
},
|
||||
<span class="hljs-attr">item</span>: {
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">18</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">44</span>,
|
||||
},
|
||||
})
|
||||
|
||||
<span class="hljs-keyword">const</span> SectionListBasics = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">SectionList</span>
|
||||
@@ -143,30 +166,11 @@ const styles = StyleSheet.create({
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22
|
||||
},
|
||||
sectionHeader: {
|
||||
paddingTop: 2,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingBottom: 2,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: 'rgba(247,247,247,1.0)',
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
},
|
||||
})
|
||||
export default SectionListBasics;
|
||||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="SectionList Basics"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SectionList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20SectionListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CSectionList%0A%20%20%20%20%20%20%20%20%20%20sections%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'D'%2C%20data%3A%20%5B'Devin'%2C%20'Dan'%2C%20'Dominic'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'J'%2C%20data%3A%20%5B'Jackson'%2C%20'James'%2C%20'Jillian'%2C%20'Jimmy'%2C%20'Joel'%2C%20'John'%2C%20'Julie'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20renderSectionHeader%3D%7B(%7Bsection%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.sectionHeader%7D%3E%7Bsection.title%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(item%2C%20index)%20%3D%3E%20index%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20sectionHeader%3A%20%7B%0A%20%20%20%20paddingTop%3A%202%2C%0A%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20paddingRight%3A%2010%2C%0A%20%20%20%20paddingBottom%3A%202%2C%0A%20%20%20%20fontSize%3A%2014%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20backgroundColor%3A%20'rgba(247%2C247%2C247%2C1.0)'%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SectionList%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20flex%3A%201%2C%0A%20%20%20paddingTop%3A%2022%0A%20%20%7D%2C%0A%20%20sectionHeader%3A%20%7B%0A%20%20%20%20paddingTop%3A%202%2C%0A%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20paddingRight%3A%2010%2C%0A%20%20%20%20paddingBottom%3A%202%2C%0A%20%20%20%20fontSize%3A%2014%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20backgroundColor%3A%20'rgba(247%2C247%2C247%2C1.0)'%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20height%3A%2044%2C%0A%20%20%7D%2C%0A%7D)%0A%0Aconst%20SectionListBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CSectionList%0A%20%20%20%20%20%20%20%20%20%20sections%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'D'%2C%20data%3A%20%5B'Devin'%2C%20'Dan'%2C%20'Dominic'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btitle%3A%20'J'%2C%20data%3A%20%5B'Jackson'%2C%20'James'%2C%20'Jillian'%2C%20'Jimmy'%2C%20'Joel'%2C%20'John'%2C%20'Julie'%5D%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.item%7D%3E%7Bitem%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20renderSectionHeader%3D%7B(%7Bsection%7D)%20%3D%3E%20%3CText%20style%3D%7Bstyles.sectionHeader%7D%3E%7Bsection.title%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(item%2C%20index)%20%3D%3E%20index%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20SectionListBasics%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
Reference in New Issue
Block a user