mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
+1
-1
@@ -20,7 +20,7 @@ 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></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>required('image!name')</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">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">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><p>Displaying images is a fascinating subject, React Native uses some cool tricks to make it a better experience.</p><h2><a class="anchor" name="no-automatic-sizing"></a>No Automatic Sizing <a class="hash-link" href="#no-automatic-sizing">#</a></h2><p>If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p><p>In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.</p><h2><a class="anchor" name="background-image-via-nesting"></a>Background Image via Nesting <a class="hash-link" href="#background-image-via-nesting">#</a></h2><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, simply create a normal <code><Image></code> component and add whatever children to it you would like to layer on top of it.</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
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><p>Displaying images is a fascinating subject; React Native uses some cool tricks to make it a better experience.</p><h2><a class="anchor" name="no-automatic-sizing"></a>No Automatic Sizing <a class="hash-link" href="#no-automatic-sizing">#</a></h2><p>If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p><p>In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.</p><h2><a class="anchor" name="background-image-via-nesting"></a>Background Image via Nesting <a class="hash-link" href="#background-image-via-nesting">#</a></h2><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, simply create a normal <code><Image></code> component and add whatever children to it you would like to layer on top of it.</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Inside<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Image<span class="token operator">></span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user