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 95f2285ba523f487cf93ec263c4109a361c2d54c
This commit is contained in:
Website Deployment Script
@@ -113,7 +113,7 @@
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 1 in 5 seconds</span>
|
||||
Animated.timing(fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 0 in 5 seconds</span>
|
||||
Animated.timing(fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -171,7 +171,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Animated"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20const%20fadeAnim%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7BfadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20const%20fadeAnim%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7BfadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -197,7 +197,7 @@ export default App;
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 1 in 5 seconds</span>
|
||||
Animated.timing(<span class="hljs-keyword">this</span>.state.fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -205,7 +205,7 @@ export default App;
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 0 in 5 seconds</span>
|
||||
Animated.timing(<span class="hljs-keyword">this</span>.state.fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -257,7 +257,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Animated"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20state%20%3D%20%7B%0A%20%20%20%20fadeAnim%3A%20new%20Animated.Value(0)%0A%20%20%7D%3B%0A%0A%20%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20render()%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20this.state.fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7Bthis.fadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7Bthis.fadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20state%20%3D%20%7B%0A%20%20%20%20fadeAnim%3A%20new%20Animated.Value(0)%0A%20%20%7D%3B%0A%0A%20%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20render()%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20this.state.fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7Bthis.fadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7Bthis.fadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 1 in 5 seconds</span>
|
||||
Animated.timing(fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 0 in 5 seconds</span>
|
||||
Animated.timing(fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -171,7 +171,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Animated"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20const%20fadeAnim%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7BfadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20const%20fadeAnim%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7BfadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -197,7 +197,7 @@ export default App;
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 1 in 5 seconds</span>
|
||||
Animated.timing(<span class="hljs-keyword">this</span>.state.fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -205,7 +205,7 @@ export default App;
|
||||
<span class="hljs-comment">// Will change fadeAnim value to 0 in 5 seconds</span>
|
||||
Animated.timing(<span class="hljs-keyword">this</span>.state.fadeAnim, {
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">5000</span>
|
||||
}).start();
|
||||
};
|
||||
|
||||
@@ -257,7 +257,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Animated"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20state%20%3D%20%7B%0A%20%20%20%20fadeAnim%3A%20new%20Animated.Value(0)%0A%20%20%7D%3B%0A%0A%20%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%202000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20render()%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20this.state.fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7Bthis.fadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7Bthis.fadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20state%20%3D%20%7B%0A%20%20%20%20fadeAnim%3A%20new%20Animated.Value(0)%0A%20%20%7D%3B%0A%0A%20%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(this.state.fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20render()%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%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20this.state.fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7Bthis.fadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7Bthis.fadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%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%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
|
||||
Reference in New Issue
Block a user