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 5c1cb73f69b2ee2c8921cb1f6abb3611ac3cde9d
This commit is contained in:
Website Deployment Script committed
1 parent
6e12ee1018
commit
59802aeafc
2 files changed
+8
-36
No files matched your search
@@ -271,14 +271,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
useWindowDimensions
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> images = [
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>
|
||||
];
|
||||
<span class="hljs-keyword">const</span> images = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">6</span>).fill(<span class="hljs-string">'https://images.unsplash.com/photo-1556740749-887f6717d7e4'</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> scrollX = useRef(<span class="hljs-keyword">new</span> Animated.Value(<span class="hljs-number">0</span>)).current;
|
||||
@@ -392,7 +385,7 @@ const styles = StyleSheet.create({
|
||||
</span></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%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20useWindowDimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20%5B%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%0A%5D%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20scrollX%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20%7B%20width%3A%20windowWidth%20%7D%20%3D%20useWindowDimensions()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%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%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%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%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20windowWidth%2C%20height%3A%20250%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.normalDot%2C%20%7B%20width%20%7D%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%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%3C%2FSafeAreaView%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%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20useWindowDimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20new%20Array(6).fill('https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4')%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20scrollX%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20%7B%20width%3A%20windowWidth%20%7D%20%3D%20useWindowDimensions()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%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%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%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%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20windowWidth%2C%20height%3A%20250%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.normalDot%2C%20%7B%20width%20%7D%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%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%3C%2FSafeAreaView%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%20scrollContainer%3A%20%7B%0A%20%20%20%20height%3A%20300%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%20card%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginVertical%3A%204%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20overflow%3A%20%22hidden%22%2C%0A%20%20%20%20alignItems%3Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android
|
||||
data-snack-preview="true"
|
||||
@@ -417,14 +410,7 @@ const styles = StyleSheet.create({
|
||||
Dimensions
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> images = [
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>
|
||||
];
|
||||
<span class="hljs-keyword">const</span> images = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">6</span>).fill(<span class="hljs-string">'https://images.unsplash.com/photo-1556740749-887f6717d7e4'</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> <span class="hljs-built_in">window</span> = Dimensions.get(<span class="hljs-string">"window"</span>);
|
||||
|
||||
@@ -563,7 +549,7 @@ const styles = StyleSheet.create({
|
||||
</span></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%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20Dimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20%5B%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%0A%5D%3B%0A%0Aconst%20window%20%3D%20Dimensions.get(%22window%22)%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20scrollX%20%3D%20new%20Animated.Value(0)%3B%0A%0A%20%20state%20%3D%20%7B%0A%20%20%20%20dimensions%3A%20%7B%0A%20%20%20%20%20%20window%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20onDimensionsChange%20%3D%20(%7B%20window%20%7D)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%20dimensions%3A%20%7B%20window%20%7D%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20componentDidMount()%20%7B%0A%20%20%20%20Dimensions.addEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20componentWillUnmount()%20%7B%0A%20%20%20%20Dimensions.removeEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20windowWidth%20%3D%20this.state.dimensions.window.width%3B%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%0A%20%20%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%20%20%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20this.scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20windowWidth%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20250%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20this.scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20Dimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20new%20Array(6).fill('https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4')%3B%0A%0Aconst%20window%20%3D%20Dimensions.get(%22window%22)%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20scrollX%20%3D%20new%20Animated.Value(0)%3B%0A%0A%20%20state%20%3D%20%7B%0A%20%20%20%20dimensions%3A%20%7B%0A%20%20%20%20%20%20window%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20onDimensionsChange%20%3D%20(%7B%20window%20%7D)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%20dimensions%3A%20%7B%20window%20%7D%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20componentDidMount()%20%7B%0A%20%20%20%20Dimensions.addEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20componentWillUnmount()%20%7B%0A%20%20%20%20Dimensions.removeEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20windowWidth%20%3D%20this.state.dimensions.window.width%3B%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%0A%20%20%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%20%20%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20this.scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20windowWidth%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20250%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20this.scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%2Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android
|
||||
data-snack-preview="true"
|
||||
|
||||
@@ -271,14 +271,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
useWindowDimensions
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> images = [
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>
|
||||
];
|
||||
<span class="hljs-keyword">const</span> images = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">6</span>).fill(<span class="hljs-string">'https://images.unsplash.com/photo-1556740749-887f6717d7e4'</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> scrollX = useRef(<span class="hljs-keyword">new</span> Animated.Value(<span class="hljs-number">0</span>)).current;
|
||||
@@ -392,7 +385,7 @@ const styles = StyleSheet.create({
|
||||
</span></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%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20useWindowDimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20%5B%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%0A%5D%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20scrollX%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20%7B%20width%3A%20windowWidth%20%7D%20%3D%20useWindowDimensions()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%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%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%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%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20windowWidth%2C%20height%3A%20250%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.normalDot%2C%20%7B%20width%20%7D%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%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%3C%2FSafeAreaView%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%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20useWindowDimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20new%20Array(6).fill('https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4')%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20scrollX%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20%7B%20width%3A%20windowWidth%20%7D%20%3D%20useWindowDimensions()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%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%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%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%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%20width%3A%20windowWidth%2C%20height%3A%20250%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CAnimated.View%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.normalDot%2C%20%7B%20width%20%7D%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%7D%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%3C%2FSafeAreaView%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%20scrollContainer%3A%20%7B%0A%20%20%20%20height%3A%20300%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%20card%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginVertical%3A%204%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20overflow%3A%20%22hidden%22%2C%0A%20%20%20%20alignItems%3Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android
|
||||
data-snack-preview="true"
|
||||
@@ -417,14 +410,7 @@ const styles = StyleSheet.create({
|
||||
Dimensions
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> images = [
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>,
|
||||
<span class="hljs-string">"https://images.unsplash.com/photo-1556740749-887f6717d7e4"</span>
|
||||
];
|
||||
<span class="hljs-keyword">const</span> images = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">6</span>).fill(<span class="hljs-string">'https://images.unsplash.com/photo-1556740749-887f6717d7e4'</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> <span class="hljs-built_in">window</span> = Dimensions.get(<span class="hljs-string">"window"</span>);
|
||||
|
||||
@@ -563,7 +549,7 @@ const styles = StyleSheet.create({
|
||||
</span></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%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20Dimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20%5B%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%2C%0A%20%20%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4%22%0A%5D%3B%0A%0Aconst%20window%20%3D%20Dimensions.get(%22window%22)%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20scrollX%20%3D%20new%20Animated.Value(0)%3B%0A%0A%20%20state%20%3D%20%7B%0A%20%20%20%20dimensions%3A%20%7B%0A%20%20%20%20%20%20window%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20onDimensionsChange%20%3D%20(%7B%20window%20%7D)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%20dimensions%3A%20%7B%20window%20%7D%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20componentDidMount()%20%7B%0A%20%20%20%20Dimensions.addEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20componentWillUnmount()%20%7B%0A%20%20%20%20Dimensions.removeEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20windowWidth%20%3D%20this.state.dimensions.window.width%3B%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%0A%20%20%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%20%20%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20this.scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20windowWidth%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20250%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20this.scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20ScrollView%2C%0A%20%20Text%2C%0A%20%20StyleSheet%2C%0A%20%20View%2C%0A%20%20ImageBackground%2C%0A%20%20Animated%2C%0A%20%20Dimensions%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20images%20%3D%20new%20Array(6).fill('https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4')%3B%0A%0Aconst%20window%20%3D%20Dimensions.get(%22window%22)%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20scrollX%20%3D%20new%20Animated.Value(0)%3B%0A%0A%20%20state%20%3D%20%7B%0A%20%20%20%20dimensions%3A%20%7B%0A%20%20%20%20%20%20window%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20onDimensionsChange%20%3D%20(%7B%20window%20%7D)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%20dimensions%3A%20%7B%20window%20%7D%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20componentDidMount()%20%7B%0A%20%20%20%20Dimensions.addEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20componentWillUnmount()%20%7B%0A%20%20%20%20Dimensions.removeEventListener(%22change%22%2C%20this.onDimensionsChange)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20windowWidth%20%3D%20this.state.dimensions.window.width%3B%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.scrollViewStyle%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20pagingEnabled%0A%20%20%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%0A%20%20%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%20%20%20nativeEvent%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20this.scrollX%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20scrollEventThrottle%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20windowWidth%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20250%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7B%20uri%3A%20image%20%7D%7D%20style%3D%7Bstyles.card%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22Image%20-%20%22%20%2B%20imageIndex%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20this.scrollX.interpolate(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20%22clamp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%2Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android
|
||||
data-snack-preview="true"
|
||||
|
||||
Reference in new issue
Block a user