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

update website

Browse Source
This commit is contained in:
Travis CI
2015-08-07 17:43:15 +00:00
parent 753d7c2137
commit eb0df1df1f
21 changed files with 149 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/image.html
+9 -18
View File
@@ -13,27 +13,18 @@ images from local disk, such as the camera roll.</p><p>Example usage:</p><div cl
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Image/Image.ios.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
the image.
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Image/Image.ios.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string}</span> <a class="hash-link" href="#source">#</a></h4><div><p><code>uri</code> is a string representing the resource identifier for the image, which
could be an http address, a local file path, or the name of a static image
resource (which should be wrapped in the <code>require(&#x27;image!name&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode <span class="propType">enum(&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;)</span> <a class="hash-link" href="#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
image dimensions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
by capInsets 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 on
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">Apple documentation</a>
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a>defaultSource <span class="propType">{uri: string}</span> <a class="hash-link" href="#defaultsource">#</a></h4><div><p>A static image to display while downloading the final image off the
network.
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError <span class="propType">function</span> <a class="hash-link" href="#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad <span class="propType">function</span> <a class="hash-link" href="#onload">#</a></h4><div><p>Invoked when load completes successfully
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd <span class="propType">function</span> <a class="hash-link" href="#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart <span class="propType">function</span> <a class="hash-link" href="#onloadstart">#</a></h4><div><p>Invoked on load start
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a>onProgress <span class="propType">function</span> <a class="hash-link" href="#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>
@platform ios</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode <span class="propType">enum(&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;)</span> <a class="hash-link" href="#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
image dimensions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string}</span> <a class="hash-link" href="#source">#</a></h4><div><p><code>uri</code> is a string representing the resource identifier for the image, which
could be an http address, a local file path, or the name of a static image
resource (which should be wrapped in the <code>require(&#x27;image!name&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span></h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType">string</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div></div></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Image.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="static-resources"></a>Static Resources <a class="hash-link" href="#static-resources">#</a></h2><p>Over the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write <code>require(&#x27;image!name-of-the-asset&#x27;)</code> in the source.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">Apple documentation</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource <span class="propType">{uri: string}</span> <a class="hash-link" href="#defaultsource">#</a></h4><div><p>A static image to display while downloading the final image off the
network.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a><span class="platform">ios</span>onLoadStart <span class="propType">function</span> <a class="hash-link" href="#onloadstart">#</a></h4><div><p>Invoked on load start</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress <span class="propType">function</span> <a class="hash-link" href="#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a><span class="platform">ios</span>onError <span class="propType">function</span> <a class="hash-link" href="#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a><span class="platform">ios</span>onLoad <span class="propType">function</span> <a class="hash-link" href="#onload">#</a></h4><div><p>Invoked when load completes successfully</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a><span class="platform">ios</span>onLoadEnd <span class="propType">function</span> <a class="hash-link" href="#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails</p></div></div></div></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Image.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="static-resources"></a>Static Resources <a class="hash-link" href="#static-resources">#</a></h2><p>Over the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write <code>require(&#x27;image!name-of-the-asset&#x27;)</code> in the source.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
</span>&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!my-icon&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token comment" spellcheck="true">
// BAD