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 601baa6768b86f543ef9f672e959df54c7f00506
This commit is contained in:
Website Deployment Script
+151
-151
@@ -93,11 +93,11 @@
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">tinyLogo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">logo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">58</span>,
|
||||
},
|
||||
});
|
||||
@@ -130,7 +130,7 @@ export default DisplayAnImage;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="%0Aimport%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%20%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%20%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20DisplayAnImage%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%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%2C%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%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%2C%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%0Aexport%20default%20DisplayAnImage%3B%0A"
|
||||
data-snack-code="%0Aimport%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20DisplayAnImage%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%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%2C%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%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%2C%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%0Aexport%20default%20DisplayAnImage%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -152,11 +152,11 @@ export default DisplayAnImage;
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">tinyLogo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">logo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">58</span>,
|
||||
},
|
||||
});
|
||||
@@ -185,7 +185,7 @@ export default DisplayAnImage;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="%0Aimport%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%20%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%20%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20DisplayAnImage%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%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%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)%3B%0A%20%20%7D%0A%7D%0A%0A"
|
||||
data-snack-code="%0Aimport%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20DisplayAnImage%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%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%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)%3B%0A%20%20%7D%0A%7D%0A%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -353,6 +353,28 @@ export default DisplayAnImageWithStyle;
|
||||
<p>For details of how this works under the hood, see <a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessible"></a><a href="#accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessible</code></h3>
|
||||
<p>When true, indicates the image is an accessibility element.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitylabel"></a><a href="#accessibilitylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLabel</code></h3>
|
||||
<p>The text that's read by the screen reader when the user interacts with the image.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>string</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="blurradius"></a><a href="#blurradius" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>blurRadius</code></h3>
|
||||
<p>blurRadius: the blur radius of the blur filter added to the image</p>
|
||||
<table>
|
||||
@@ -367,6 +389,78 @@ export default DisplayAnImageWithStyle;
|
||||
<p>Tip : IOS you will need to increase <code>blurRadius</code> more than <code>5</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="capinsets"></a><a href="#capinsets" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>capInsets</code></h3>
|
||||
<p>When the image is resized, the corners of the size specified by <code>capInsets</code> will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets">official Apple documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object: {top: number, left: number, bottom: number, right: number}</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultsource"></a><a href="#defaultsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultSource</code></h3>
|
||||
<p>A static image to display while loading the image source.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object, number</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>If passing an object, the general shape is <code>{uri: string, width: number, height: number, scale: number}</code>:</p>
|
||||
<ul>
|
||||
<li><code>uri</code> - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the <code>require('./path/to/image.png')</code> function).</li>
|
||||
<li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case these will be used to set the default <code><Image/></code> component dimensions.</li>
|
||||
<li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.</li>
|
||||
</ul>
|
||||
<p>If passing a number:</p>
|
||||
<ul>
|
||||
<li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> On Android, the default source prop is ignored on debug builds.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fadeduration"></a><a href="#fadeduration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fadeDuration</code></h3>
|
||||
<p>Android only. By default, it is 300ms.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loadingindicatorsource"></a><a href="#loadingindicatorsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>loadingIndicatorSource</code></h3>
|
||||
<p>Similarly to <code>source</code>, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of ImageSourcePropTypes, number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p>Can accept a number as returned by <code>require('./image.jpg')</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onerror"></a><a href="#onerror" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onError</code></h3>
|
||||
<p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onlayout"></a><a href="#onlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onLayout</code></h3>
|
||||
<p>Invoked on mount and layout changes with <code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p>
|
||||
<table>
|
||||
@@ -412,6 +506,56 @@ export default DisplayAnImageWithStyle;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpartialload"></a><a href="#onpartialload" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPartialLoad</code></h3>
|
||||
<p>Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onprogress"></a><a href="#onprogress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onProgress</code></h3>
|
||||
<p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="progressiverenderingenabled"></a><a href="#progressiverenderingenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>progressiveRenderingEnabled</code></h3>
|
||||
<p>Android only. When true, enables progressive jpeg streaming. <a href="https://frescolib.org/docs/progressive-jpegs.html">https://frescolib.org/docs/progressive-jpegs.html</a></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemethod"></a><a href="#resizemethod" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMethod</code></h3>
|
||||
<p>The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to <code>auto</code>.</p>
|
||||
<ul>
|
||||
<li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li>
|
||||
<li><p><code>resize</code>: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of <code>scale</code> when the image is much larger than the view.</p></li>
|
||||
<li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.</p></li>
|
||||
</ul>
|
||||
<p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing.html">http://frescolib.org/docs/resizing.html</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('auto', 'resize', 'scale')</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemode"></a><a href="#resizemode" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMode</code></h3>
|
||||
<p>Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to <code>cover</code>.</p>
|
||||
<ul>
|
||||
@@ -443,31 +587,6 @@ export default DisplayAnImageWithStyle;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loadingindicatorsource"></a><a href="#loadingindicatorsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>loadingIndicatorSource</code></h3>
|
||||
<p>Similarly to <code>source</code>, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of ImageSourcePropTypes, number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p>Can accept a number as returned by <code>require('./image.jpg')</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onerror"></a><a href="#onerror" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onError</code></h3>
|
||||
<p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="testid"></a><a href="#testid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>testID</code></h3>
|
||||
<p>A unique identifier for this element to be used in UI Automation testing scripts.</p>
|
||||
<table>
|
||||
@@ -478,125 +597,6 @@ export default DisplayAnImageWithStyle;
|
||||
<tr><td>string</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemethod"></a><a href="#resizemethod" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMethod</code></h3>
|
||||
<p>The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to <code>auto</code>.</p>
|
||||
<ul>
|
||||
<li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li>
|
||||
<li><p><code>resize</code>: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of <code>scale</code> when the image is much larger than the view.</p></li>
|
||||
<li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.</p></li>
|
||||
</ul>
|
||||
<p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing.html">http://frescolib.org/docs/resizing.html</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('auto', 'resize', 'scale')</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitylabel"></a><a href="#accessibilitylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLabel</code></h3>
|
||||
<p>The text that's read by the screen reader when the user interacts with the image.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>string</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessible"></a><a href="#accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessible</code></h3>
|
||||
<p>When true, indicates the image is an accessibility element.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="capinsets"></a><a href="#capinsets" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>capInsets</code></h3>
|
||||
<p>When the image is resized, the corners of the size specified by <code>capInsets</code> will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets">official Apple documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object: {top: number, left: number, bottom: number, right: number}</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultsource"></a><a href="#defaultsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultSource</code></h3>
|
||||
<p>A static image to display while loading the image source.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object, number</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>If passing an object, the general shape is <code>{uri: string, width: number, height: number, scale: number}</code>:</p>
|
||||
<ul>
|
||||
<li><code>uri</code> - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the <code>require('./path/to/image.png')</code> function).</li>
|
||||
<li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case these will be used to set the default <code><Image/></code> component dimensions.</li>
|
||||
<li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.</li>
|
||||
</ul>
|
||||
<p>If passing a number:</p>
|
||||
<ul>
|
||||
<li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> On Android, the default source prop is ignored on debug builds.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpartialload"></a><a href="#onpartialload" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPartialLoad</code></h3>
|
||||
<p>Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onprogress"></a><a href="#onprogress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onProgress</code></h3>
|
||||
<p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fadeduration"></a><a href="#fadeduration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fadeDuration</code></h3>
|
||||
<p>Android only. By default, it is 300ms.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="progressiverenderingenabled"></a><a href="#progressiverenderingenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>progressiveRenderingEnabled</code></h3>
|
||||
<p>Android only. When true, enables progressive jpeg streaming. <a href="https://frescolib.org/docs/progressive-jpegs.html">https://frescolib.org/docs/progressive-jpegs.html</a></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getsize"></a><a href="#getsize" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getSize()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">Image<span class="token punctuation">.</span><span class="token function">getSize</span><span class="token punctuation">(</span>uri<span class="token punctuation">,</span> success<span class="token punctuation">,</span> <span class="token punctuation">[</span>failure<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -692,7 +692,7 @@ export default DisplayAnImageWithStyle;
|
||||
<blockquote>
|
||||
<p><code>ImageSource</code> is an object like <code>{ uri: '<http location || file path>' }</code></p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/flatlist"><span class="arrow-prev">← </span><span class="function-name-prevnext">FlatList</span></a><a class="docs-next button" href="/react-native/docs/next/imagebackground"><span class="function-name-prevnext">ImageBackground</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#blurradius"><code>blurRadius</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onload"><code>onLoad</code></a></li><li><a href="#onloadend"><code>onLoadEnd</code></a></li><li><a href="#onloadstart"><code>onLoadStart</code></a></li><li><a href="#resizemode"><code>resizeMode</code></a></li><li><a href="#source"><code>source</code></a></li><li><a href="#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li><li><a href="#onerror"><code>onError</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#resizemethod"><code>resizeMethod</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#accessible"><code>accessible</code></a></li><li><a href="#capinsets"><code>capInsets</code></a></li><li><a href="#defaultsource"><code>defaultSource</code></a></li><li><a href="#onpartialload"><code>onPartialLoad</code></a></li><li><a href="#onprogress"><code>onProgress</code></a></li><li><a href="#fadeduration"><code>fadeDuration</code></a></li><li><a href="#progressiverenderingenabled"><code>progressiveRenderingEnabled</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#getsize"><code>getSize()</code></a></li><li><a href="#getsizewithheaders"><code>getSizeWithHeaders()</code></a></li><li><a href="#prefetch"><code>prefetch()</code></a></li><li><a href="#abortprefetch"><code>abortPrefetch()</code></a></li><li><a href="#querycache"><code>queryCache()</code></a></li><li><a href="#resolveassetsource"><code>resolveAssetSource()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/flatlist"><span class="arrow-prev">← </span><span class="function-name-prevnext">FlatList</span></a><a class="docs-next button" href="/react-native/docs/next/imagebackground"><span class="function-name-prevnext">ImageBackground</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#accessible"><code>accessible</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#blurradius"><code>blurRadius</code></a></li><li><a href="#capinsets"><code>capInsets</code></a></li><li><a href="#defaultsource"><code>defaultSource</code></a></li><li><a href="#fadeduration"><code>fadeDuration</code></a></li><li><a href="#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li><li><a href="#onerror"><code>onError</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onload"><code>onLoad</code></a></li><li><a href="#onloadend"><code>onLoadEnd</code></a></li><li><a href="#onloadstart"><code>onLoadStart</code></a></li><li><a href="#onpartialload"><code>onPartialLoad</code></a></li><li><a href="#onprogress"><code>onProgress</code></a></li><li><a href="#progressiverenderingenabled"><code>progressiveRenderingEnabled</code></a></li><li><a href="#resizemethod"><code>resizeMethod</code></a></li><li><a href="#resizemode"><code>resizeMode</code></a></li><li><a href="#source"><code>source</code></a></li><li><a href="#testid"><code>testID</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#getsize"><code>getSize()</code></a></li><li><a href="#getsizewithheaders"><code>getSizeWithHeaders()</code></a></li><li><a href="#prefetch"><code>prefetch()</code></a></li><li><a href="#abortprefetch"><code>abortPrefetch()</code></a></li><li><a href="#querycache"><code>queryCache()</code></a></li><li><a href="#resolveassetsource"><code>resolveAssetSource()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+151
-151
@@ -93,11 +93,11 @@
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">tinyLogo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">logo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">58</span>,
|
||||
},
|
||||
});
|
||||
@@ -130,7 +130,7 @@ export default DisplayAnImage;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="%0Aimport%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%20%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%20%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20DisplayAnImage%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%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%2C%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%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%2C%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%0Aexport%20default%20DisplayAnImage%3B%0A"
|
||||
data-snack-code="%0Aimport%20React%20from%20'react'%3B%0Aimport%20%7B%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aconst%20DisplayAnImage%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%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%2C%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%20%20%3CImage%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20source%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20uri%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%2C%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%0Aexport%20default%20DisplayAnImage%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -152,11 +152,11 @@ export default DisplayAnImage;
|
||||
<span class="hljs-attr">paddingTop</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">tinyLogo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
|
||||
},
|
||||
<span class="hljs-attr">logo</span>: {
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">66</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">58</span>,
|
||||
},
|
||||
});
|
||||
@@ -185,7 +185,7 @@ export default DisplayAnImage;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="%0Aimport%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%20%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%20%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20DisplayAnImage%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%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%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)%3B%0A%20%20%7D%0A%7D%0A%0A"
|
||||
data-snack-code="%0Aimport%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20paddingTop%3A%2050%2C%0A%20%20%7D%2C%0A%20%20tinyLogo%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%2050%2C%0A%20%20%7D%2C%0A%20%20logo%3A%20%7B%0A%20%20%20%20width%3A%2066%2C%0A%20%20%20%20height%3A%2058%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20DisplayAnImage%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%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('%40expo%2Fsnack-static%2Freact-native-logo.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.tinyLogo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ftiny_logo.png'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.logo%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%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)%3B%0A%20%20%7D%0A%7D%0A%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -353,6 +353,28 @@ export default DisplayAnImageWithStyle;
|
||||
<p>For details of how this works under the hood, see <a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessible"></a><a href="#accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessible</code></h3>
|
||||
<p>When true, indicates the image is an accessibility element.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitylabel"></a><a href="#accessibilitylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLabel</code></h3>
|
||||
<p>The text that's read by the screen reader when the user interacts with the image.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>string</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="blurradius"></a><a href="#blurradius" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>blurRadius</code></h3>
|
||||
<p>blurRadius: the blur radius of the blur filter added to the image</p>
|
||||
<table>
|
||||
@@ -367,6 +389,78 @@ export default DisplayAnImageWithStyle;
|
||||
<p>Tip : IOS you will need to increase <code>blurRadius</code> more than <code>5</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="capinsets"></a><a href="#capinsets" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>capInsets</code></h3>
|
||||
<p>When the image is resized, the corners of the size specified by <code>capInsets</code> will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets">official Apple documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object: {top: number, left: number, bottom: number, right: number}</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultsource"></a><a href="#defaultsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultSource</code></h3>
|
||||
<p>A static image to display while loading the image source.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object, number</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>If passing an object, the general shape is <code>{uri: string, width: number, height: number, scale: number}</code>:</p>
|
||||
<ul>
|
||||
<li><code>uri</code> - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the <code>require('./path/to/image.png')</code> function).</li>
|
||||
<li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case these will be used to set the default <code><Image/></code> component dimensions.</li>
|
||||
<li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.</li>
|
||||
</ul>
|
||||
<p>If passing a number:</p>
|
||||
<ul>
|
||||
<li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> On Android, the default source prop is ignored on debug builds.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fadeduration"></a><a href="#fadeduration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fadeDuration</code></h3>
|
||||
<p>Android only. By default, it is 300ms.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loadingindicatorsource"></a><a href="#loadingindicatorsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>loadingIndicatorSource</code></h3>
|
||||
<p>Similarly to <code>source</code>, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of ImageSourcePropTypes, number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p>Can accept a number as returned by <code>require('./image.jpg')</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onerror"></a><a href="#onerror" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onError</code></h3>
|
||||
<p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onlayout"></a><a href="#onlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onLayout</code></h3>
|
||||
<p>Invoked on mount and layout changes with <code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p>
|
||||
<table>
|
||||
@@ -412,6 +506,56 @@ export default DisplayAnImageWithStyle;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpartialload"></a><a href="#onpartialload" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPartialLoad</code></h3>
|
||||
<p>Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onprogress"></a><a href="#onprogress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onProgress</code></h3>
|
||||
<p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="progressiverenderingenabled"></a><a href="#progressiverenderingenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>progressiveRenderingEnabled</code></h3>
|
||||
<p>Android only. When true, enables progressive jpeg streaming. <a href="https://frescolib.org/docs/progressive-jpegs.html">https://frescolib.org/docs/progressive-jpegs.html</a></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemethod"></a><a href="#resizemethod" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMethod</code></h3>
|
||||
<p>The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to <code>auto</code>.</p>
|
||||
<ul>
|
||||
<li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li>
|
||||
<li><p><code>resize</code>: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of <code>scale</code> when the image is much larger than the view.</p></li>
|
||||
<li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.</p></li>
|
||||
</ul>
|
||||
<p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing.html">http://frescolib.org/docs/resizing.html</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('auto', 'resize', 'scale')</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemode"></a><a href="#resizemode" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMode</code></h3>
|
||||
<p>Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to <code>cover</code>.</p>
|
||||
<ul>
|
||||
@@ -443,31 +587,6 @@ export default DisplayAnImageWithStyle;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loadingindicatorsource"></a><a href="#loadingindicatorsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>loadingIndicatorSource</code></h3>
|
||||
<p>Similarly to <code>source</code>, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of ImageSourcePropTypes, number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p>Can accept a number as returned by <code>require('./image.jpg')</code></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onerror"></a><a href="#onerror" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onError</code></h3>
|
||||
<p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="testid"></a><a href="#testid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>testID</code></h3>
|
||||
<p>A unique identifier for this element to be used in UI Automation testing scripts.</p>
|
||||
<table>
|
||||
@@ -478,125 +597,6 @@ export default DisplayAnImageWithStyle;
|
||||
<tr><td>string</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resizemethod"></a><a href="#resizemethod" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resizeMethod</code></h3>
|
||||
<p>The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to <code>auto</code>.</p>
|
||||
<ul>
|
||||
<li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li>
|
||||
<li><p><code>resize</code>: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of <code>scale</code> when the image is much larger than the view.</p></li>
|
||||
<li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.</p></li>
|
||||
</ul>
|
||||
<p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing.html">http://frescolib.org/docs/resizing.html</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('auto', 'resize', 'scale')</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitylabel"></a><a href="#accessibilitylabel" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLabel</code></h3>
|
||||
<p>The text that's read by the screen reader when the user interacts with the image.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>string</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessible"></a><a href="#accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessible</code></h3>
|
||||
<p>When true, indicates the image is an accessibility element.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="capinsets"></a><a href="#capinsets" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>capInsets</code></h3>
|
||||
<p>When the image is resized, the corners of the size specified by <code>capInsets</code> will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets">official Apple documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object: {top: number, left: number, bottom: number, right: number}</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultsource"></a><a href="#defaultsource" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultSource</code></h3>
|
||||
<p>A static image to display while loading the image source.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>object, number</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>If passing an object, the general shape is <code>{uri: string, width: number, height: number, scale: number}</code>:</p>
|
||||
<ul>
|
||||
<li><code>uri</code> - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the <code>require('./path/to/image.png')</code> function).</li>
|
||||
<li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case these will be used to set the default <code><Image/></code> component dimensions.</li>
|
||||
<li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.</li>
|
||||
</ul>
|
||||
<p>If passing a number:</p>
|
||||
<ul>
|
||||
<li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> On Android, the default source prop is ignored on debug builds.</p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpartialload"></a><a href="#onpartialload" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPartialLoad</code></h3>
|
||||
<p>Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onprogress"></a><a href="#onprogress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onProgress</code></h3>
|
||||
<p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>function</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fadeduration"></a><a href="#fadeduration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fadeDuration</code></h3>
|
||||
<p>Android only. By default, it is 300ms.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="progressiverenderingenabled"></a><a href="#progressiverenderingenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>progressiveRenderingEnabled</code></h3>
|
||||
<p>Android only. When true, enables progressive jpeg streaming. <a href="https://frescolib.org/docs/progressive-jpegs.html">https://frescolib.org/docs/progressive-jpegs.html</a></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getsize"></a><a href="#getsize" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getSize()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">Image<span class="token punctuation">.</span><span class="token function">getSize</span><span class="token punctuation">(</span>uri<span class="token punctuation">,</span> success<span class="token punctuation">,</span> <span class="token punctuation">[</span>failure<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -692,7 +692,7 @@ export default DisplayAnImageWithStyle;
|
||||
<blockquote>
|
||||
<p><code>ImageSource</code> is an object like <code>{ uri: '<http location || file path>' }</code></p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/flatlist"><span class="arrow-prev">← </span><span class="function-name-prevnext">FlatList</span></a><a class="docs-next button" href="/react-native/docs/next/imagebackground"><span class="function-name-prevnext">ImageBackground</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#blurradius"><code>blurRadius</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onload"><code>onLoad</code></a></li><li><a href="#onloadend"><code>onLoadEnd</code></a></li><li><a href="#onloadstart"><code>onLoadStart</code></a></li><li><a href="#resizemode"><code>resizeMode</code></a></li><li><a href="#source"><code>source</code></a></li><li><a href="#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li><li><a href="#onerror"><code>onError</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#resizemethod"><code>resizeMethod</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#accessible"><code>accessible</code></a></li><li><a href="#capinsets"><code>capInsets</code></a></li><li><a href="#defaultsource"><code>defaultSource</code></a></li><li><a href="#onpartialload"><code>onPartialLoad</code></a></li><li><a href="#onprogress"><code>onProgress</code></a></li><li><a href="#fadeduration"><code>fadeDuration</code></a></li><li><a href="#progressiverenderingenabled"><code>progressiveRenderingEnabled</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#getsize"><code>getSize()</code></a></li><li><a href="#getsizewithheaders"><code>getSizeWithHeaders()</code></a></li><li><a href="#prefetch"><code>prefetch()</code></a></li><li><a href="#abortprefetch"><code>abortPrefetch()</code></a></li><li><a href="#querycache"><code>queryCache()</code></a></li><li><a href="#resolveassetsource"><code>resolveAssetSource()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/next/flatlist"><span class="arrow-prev">← </span><span class="function-name-prevnext">FlatList</span></a><a class="docs-next button" href="/react-native/docs/next/imagebackground"><span class="function-name-prevnext">ImageBackground</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#accessible"><code>accessible</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#blurradius"><code>blurRadius</code></a></li><li><a href="#capinsets"><code>capInsets</code></a></li><li><a href="#defaultsource"><code>defaultSource</code></a></li><li><a href="#fadeduration"><code>fadeDuration</code></a></li><li><a href="#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li><li><a href="#onerror"><code>onError</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onload"><code>onLoad</code></a></li><li><a href="#onloadend"><code>onLoadEnd</code></a></li><li><a href="#onloadstart"><code>onLoadStart</code></a></li><li><a href="#onpartialload"><code>onPartialLoad</code></a></li><li><a href="#onprogress"><code>onProgress</code></a></li><li><a href="#progressiverenderingenabled"><code>progressiveRenderingEnabled</code></a></li><li><a href="#resizemethod"><code>resizeMethod</code></a></li><li><a href="#resizemode"><code>resizeMode</code></a></li><li><a href="#source"><code>source</code></a></li><li><a href="#testid"><code>testID</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#getsize"><code>getSize()</code></a></li><li><a href="#getsizewithheaders"><code>getSizeWithHeaders()</code></a></li><li><a href="#prefetch"><code>prefetch()</code></a></li><li><a href="#abortprefetch"><code>abortPrefetch()</code></a></li><li><a href="#querycache"><code>queryCache()</code></a></li><li><a href="#resolveassetsource"><code>resolveAssetSource()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -72,19 +72,64 @@
|
||||
<p>At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.</p>
|
||||
<p>Background drawable of native feedback touchable can be customized with <code>background</code> property.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function-variable function">renderButton</span><span class="token punctuation">:</span> <span class="token keyword">function</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 class="token class-name">TouchableNativeFeedback</span></span>
|
||||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">background</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>TouchableNativeFeedback<span class="token punctuation">.</span><span class="token function">SelectableBackground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><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">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Button</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">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</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">TouchableNativeFeedback</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>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<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, StyleSheet, TouchableNativeFeedback } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">"expo-constants"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> randomHexColor = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">"#000000"</span>.replace(<span class="hljs-regexp">/0/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (~~(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">16</span>)).toString(<span class="hljs-number">16</span>);
|
||||
});
|
||||
};
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [rippleColor, setRippleColor] = useState(randomHexColor());
|
||||
<span class="hljs-keyword">const</span> [rippleOverflow, setRippleOverflow] = useState(<span class="hljs-literal">false</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">TouchableNativeFeedback</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span> {
|
||||
setRippleColor(randomHexColor());
|
||||
setRippleOverflow(!rippleOverflow);
|
||||
}}
|
||||
background={TouchableNativeFeedback.Ripple(rippleColor, rippleOverflow)}
|
||||
>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.touchable}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TouchableNativeFeedback<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-tag"></<span class="hljs-name">TouchableNativeFeedback</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></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">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: Constants.statusBarHeight,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#ecf0f1"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">8</span>
|
||||
},
|
||||
<span class="hljs-attr">touchable</span>: { <span class="hljs-attr">flex</span>: <span class="hljs-number">0.5</span>, <span class="hljs-attr">borderColor</span>: <span class="hljs-string">"black"</span>, <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span> },
|
||||
<span class="hljs-attr">text</span>: { <span class="hljs-attr">alignSelf</span>: <span class="hljs-string">"center"</span> }
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="TouchableNativeFeedback Android Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Text%2C%20View%2C%20StyleSheet%2C%20TouchableNativeFeedback%20%7D%20from%20%22react-native%22%3B%0Aimport%20Constants%20from%20%22expo-constants%22%3B%0A%0Aconst%20randomHexColor%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20%22%23000000%22.replace(%2F0%2Fg%2C%20function()%20%7B%0A%20%20%20%20return%20(~~(Math.random()%20*%2016)).toString(16)%3B%0A%20%20%7D)%3B%0A%7D%3B%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5BrippleColor%2C%20setRippleColor%5D%20%3D%20useState(randomHexColor())%3B%0A%20%20const%20%5BrippleOverflow%2C%20setRippleOverflow%5D%20%3D%20useState(false)%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CTouchableNativeFeedback%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%20setRippleColor(randomHexColor())%3B%0A%20%20%20%20%20%20%20%20%20%20setRippleOverflow(!rippleOverflow)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20background%3D%7BTouchableNativeFeedback.Ripple(rippleColor%2C%20rippleOverflow)%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.touchable%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETouchableNativeFeedback%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FTouchableNativeFeedback%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%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%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingTop%3A%20Constants.statusBarHeight%2C%0A%20%20%20%20backgroundColor%3A%20%22%23ecf0f1%22%2C%0A%20%20%20%20padding%3A%208%0A%20%20%7D%2C%0A%20%20touchable%3A%20%7B%20flex%3A%200.5%2C%20borderColor%3A%20%22black%22%2C%20borderWidth%3A%201%20%7D%2C%0A%20%20text%3A%20%7B%20alignSelf%3A%20%22center%22%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<p>Inherits <a href="/react-native/docs/next/touchablewithoutfeedback#props">TouchableWithoutFeedback Props</a>.</p>
|
||||
|
||||
@@ -72,19 +72,64 @@
|
||||
<p>At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.</p>
|
||||
<p>Background drawable of native feedback touchable can be customized with <code>background</code> property.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function-variable function">renderButton</span><span class="token punctuation">:</span> <span class="token keyword">function</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 class="token class-name">TouchableNativeFeedback</span></span>
|
||||
<span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">background</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>TouchableNativeFeedback<span class="token punctuation">.</span><span class="token function">SelectableBackground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><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">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Button</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">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</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">TouchableNativeFeedback</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>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<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, StyleSheet, TouchableNativeFeedback } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">"expo-constants"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> randomHexColor = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">"#000000"</span>.replace(<span class="hljs-regexp">/0/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (~~(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">16</span>)).toString(<span class="hljs-number">16</span>);
|
||||
});
|
||||
};
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [rippleColor, setRippleColor] = useState(randomHexColor());
|
||||
<span class="hljs-keyword">const</span> [rippleOverflow, setRippleOverflow] = useState(<span class="hljs-literal">false</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">TouchableNativeFeedback</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span> {
|
||||
setRippleColor(randomHexColor());
|
||||
setRippleOverflow(!rippleOverflow);
|
||||
}}
|
||||
background={TouchableNativeFeedback.Ripple(rippleColor, rippleOverflow)}
|
||||
>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.touchable}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TouchableNativeFeedback<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-tag"></<span class="hljs-name">TouchableNativeFeedback</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></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">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingTop</span>: Constants.statusBarHeight,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#ecf0f1"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">8</span>
|
||||
},
|
||||
<span class="hljs-attr">touchable</span>: { <span class="hljs-attr">flex</span>: <span class="hljs-number">0.5</span>, <span class="hljs-attr">borderColor</span>: <span class="hljs-string">"black"</span>, <span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span> },
|
||||
<span class="hljs-attr">text</span>: { <span class="hljs-attr">alignSelf</span>: <span class="hljs-string">"center"</span> }
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="TouchableNativeFeedback Android Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Text%2C%20View%2C%20StyleSheet%2C%20TouchableNativeFeedback%20%7D%20from%20%22react-native%22%3B%0Aimport%20Constants%20from%20%22expo-constants%22%3B%0A%0Aconst%20randomHexColor%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20%22%23000000%22.replace(%2F0%2Fg%2C%20function()%20%7B%0A%20%20%20%20return%20(~~(Math.random()%20*%2016)).toString(16)%3B%0A%20%20%7D)%3B%0A%7D%3B%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5BrippleColor%2C%20setRippleColor%5D%20%3D%20useState(randomHexColor())%3B%0A%20%20const%20%5BrippleOverflow%2C%20setRippleOverflow%5D%20%3D%20useState(false)%3B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CTouchableNativeFeedback%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%20setRippleColor(randomHexColor())%3B%0A%20%20%20%20%20%20%20%20%20%20setRippleOverflow(!rippleOverflow)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20background%3D%7BTouchableNativeFeedback.Ripple(rippleColor%2C%20rippleOverflow)%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.touchable%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETouchableNativeFeedback%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FTouchableNativeFeedback%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%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%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingTop%3A%20Constants.statusBarHeight%2C%0A%20%20%20%20backgroundColor%3A%20%22%23ecf0f1%22%2C%0A%20%20%20%20padding%3A%208%0A%20%20%7D%2C%0A%20%20touchable%3A%20%7B%20flex%3A%200.5%2C%20borderColor%3A%20%22black%22%2C%20borderWidth%3A%201%20%7D%2C%0A%20%20text%3A%20%7B%20alignSelf%3A%20%22center%22%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<p>Inherits <a href="/react-native/docs/next/touchablewithoutfeedback#props">TouchableWithoutFeedback Props</a>.</p>
|
||||
|
||||
Reference in New Issue
Block a user