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

Deploy website

Browse Source 
Deploy website version based on 7985a601d972dfba5ed0e816c8b9ba711d40c1a5
This commit is contained in:
Website Deployment Script
2020-02-16 01:18:35 +00:00
parent aabcbae1b6
commit f2c157af47
2 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/switch.html
+22 -11
View File
@@ -70,26 +70,37 @@
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/switch.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Switch</h1></header><article><div><span><p>Renders a boolean input.</p>
<p>This is a controlled component that requires an <code>onValueChange</code> callback that updates the <code>value</code> prop in order for the component to reflect user actions. If the <code>value</code> prop is not updated, the component will continue to render the supplied <code>value</code> prop instead of the expected result of any user actions.</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, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { Text, View, Switch } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<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> { View, Switch, StyleSheet } <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> [value, setValue] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> [isEnabled, setIsEnabled] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> toggleSwitch = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> setIsEnabled(<span class="hljs-function"><span class="hljs-params">previousState</span> =&gt;</span> !previousState);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<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>' }}&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span>
<span class="hljs-attr">onValueChange</span>=<span class="hljs-string">{v</span> =&gt;</span> {
setValue(v);
}}
/&gt;
<span class="hljs-attr">trackColor</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">false:</span> "#<span class="hljs-attr">767577</span>", <span class="hljs-attr">true:</span> "#<span class="hljs-attr">81b0ff</span>" }}
<span class="hljs-attr">thumbColor</span>=<span class="hljs-string">{isEnabled</span> ? "#<span class="hljs-attr">f5dd4b</span>" <span class="hljs-attr">:</span> "#<span class="hljs-attr">f4f3f4</span>"}
<span class="hljs-attr">ios_backgroundColor</span>=<span class="hljs-string">"#3e3e3e"</span>
<span class="hljs-attr">onValueChange</span>=<span class="hljs-string">{toggleSwitch}</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">{isEnabled}</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="switch"
data-snack-name="Switch"
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%20View%2C%20Switch%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bvalue%2C%20setValue%5D%20%3D%20useState(false)%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20'center'%2C%20alignItems%3A%20'center'%20%7D%7D%3E%0A%20%20%20%20%20%20%3CSwitch%0A%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%0A%20%20%20%20%20%20%20%20onValueChange%3D%7Bv%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setValue(v)%3B%0A%20%20%20%20%20%20%20%20%7D%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"
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20View%2C%20Switch%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BisEnabled%2C%20setIsEnabled%5D%20%3D%20useState(false)%3B%0A%20%20const%20toggleSwitch%20%3D%20()%20%3D%3E%20setIsEnabled(previousState%20%3D%3E%20!previousState)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CSwitch%0A%20%20%20%20%20%20%20%20trackColor%3D%7B%7B%20false%3A%20%22%23767577%22%2C%20true%3A%20%22%2381b0ff%22%20%7D%7D%0A%20%20%20%20%20%20%20%20thumbColor%3D%7BisEnabled%20%3F%20%22%23f5dd4b%22%20%3A%20%22%23f4f3f4%22%7D%0A%20%20%20%20%20%20%20%20ios_backgroundColor%3D%22%233e3e3e%22%0A%20%20%20%20%20%20%20%20onValueChange%3D%7BtoggleSwitch%7D%0A%20%20%20%20%20%20%20%20value%3D%7BisEnabled%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%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"
docs/next/switch/index.html
+22 -11
View File
@@ -70,26 +70,37 @@
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/switch.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Switch</h1></header><article><div><span><p>Renders a boolean input.</p>
<p>This is a controlled component that requires an <code>onValueChange</code> callback that updates the <code>value</code> prop in order for the component to reflect user actions. If the <code>value</code> prop is not updated, the component will continue to render the supplied <code>value</code> prop instead of the expected result of any user actions.</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, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { Text, View, Switch } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<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> { View, Switch, StyleSheet } <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> [value, setValue] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> [isEnabled, setIsEnabled] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> toggleSwitch = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> setIsEnabled(<span class="hljs-function"><span class="hljs-params">previousState</span> =&gt;</span> !previousState);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<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>' }}&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span>
<span class="hljs-attr">onValueChange</span>=<span class="hljs-string">{v</span> =&gt;</span> {
setValue(v);
}}
/&gt;
<span class="hljs-attr">trackColor</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">false:</span> "#<span class="hljs-attr">767577</span>", <span class="hljs-attr">true:</span> "#<span class="hljs-attr">81b0ff</span>" }}
<span class="hljs-attr">thumbColor</span>=<span class="hljs-string">{isEnabled</span> ? "#<span class="hljs-attr">f5dd4b</span>" <span class="hljs-attr">:</span> "#<span class="hljs-attr">f4f3f4</span>"}
<span class="hljs-attr">ios_backgroundColor</span>=<span class="hljs-string">"#3e3e3e"</span>
<span class="hljs-attr">onValueChange</span>=<span class="hljs-string">{toggleSwitch}</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">{isEnabled}</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
data-snack-name="switch"
data-snack-name="Switch"
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%20View%2C%20Switch%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bvalue%2C%20setValue%5D%20%3D%20useState(false)%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20'center'%2C%20alignItems%3A%20'center'%20%7D%7D%3E%0A%20%20%20%20%20%20%3CSwitch%0A%20%20%20%20%20%20%20%20value%3D%7Bvalue%7D%0A%20%20%20%20%20%20%20%20onValueChange%3D%7Bv%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setValue(v)%3B%0A%20%20%20%20%20%20%20%20%7D%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"
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20View%2C%20Switch%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BisEnabled%2C%20setIsEnabled%5D%20%3D%20useState(false)%3B%0A%20%20const%20toggleSwitch%20%3D%20()%20%3D%3E%20setIsEnabled(previousState%20%3D%3E%20!previousState)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CSwitch%0A%20%20%20%20%20%20%20%20trackColor%3D%7B%7B%20false%3A%20%22%23767577%22%2C%20true%3A%20%22%2381b0ff%22%20%7D%7D%0A%20%20%20%20%20%20%20%20thumbColor%3D%7BisEnabled%20%3F%20%22%23f5dd4b%22%20%3A%20%22%23f4f3f4%22%7D%0A%20%20%20%20%20%20%20%20ios_backgroundColor%3D%22%233e3e3e%22%0A%20%20%20%20%20%20%20%20onValueChange%3D%7BtoggleSwitch%7D%0A%20%20%20%20%20%20%20%20value%3D%7BisEnabled%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%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
data-snack-platform="web"
data-snack-supported-platforms=ios,android,web
data-snack-preview="true"