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:
Travis CI
+1
-1
@@ -11,7 +11,7 @@
|
||||
<span class="token comment" spellcheck="true">
|
||||
// GOOD
|
||||
</span><span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active <span class="token operator">?</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./my-icon-active.png'</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./my-icon-inactive.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p><strong>Available React Native 0.14+</strong>. If you've generated your project with 0.13 or earlier, read this. The new asset system relies on build hooks for <a href="https://github.com/facebook/react-native/pull/3523" target="_blank">Xcode</a> and <a href="https://github.com/facebook/react-native/commit/9dc036d2b99e6233297c55a3490bfc308e34e75f" target="_blank">Gradle</a> that are included in new projects generated with <code>react-native init</code>. If you generated your projects before that, you'll have to manually add them to your projects to use the new images asset system. See <a href="/react-native/docs/upgrading.html" target="">Upgrading</a> for instructions on how to do this.</p><h2><a class="anchor" name="images-from-hybrid-app-s-resources"></a>Images From Hybrid App's Resources <a class="hash-link" href="#images-from-hybrid-app-s-resources">#</a></h2><p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app (via Xcode asset catalogs or Android drawable folder):</p><div class="prism language-javascript"><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'app_icon'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>Note that this approach provides no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p><h2><a class="anchor" name="network-images"></a>Network Images <a class="hash-link" href="#network-images">#</a></h2><p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image.</em></p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set { width: undefined, height: undefined } on the style attribute.</p><p><strong>Available React Native 0.14+</strong>. If you've generated your project with 0.13 or earlier, read this. The new asset system relies on build hooks for <a href="https://github.com/facebook/react-native/pull/3523" target="_blank">Xcode</a> and <a href="https://github.com/facebook/react-native/commit/9dc036d2b99e6233297c55a3490bfc308e34e75f" target="_blank">Gradle</a> that are included in new projects generated with <code>react-native init</code>. If you generated your projects before that, you'll have to manually add them to your projects to use the new images asset system. See <a href="/react-native/docs/upgrading.html" target="">Upgrading</a> for instructions on how to do this.</p><h2><a class="anchor" name="images-from-hybrid-app-s-resources"></a>Images From Hybrid App's Resources <a class="hash-link" href="#images-from-hybrid-app-s-resources">#</a></h2><p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app (via Xcode asset catalogs or Android drawable folder):</p><div class="prism language-javascript"><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'app_icon'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>Note that this approach provides no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p><h2><a class="anchor" name="network-images"></a>Network Images <a class="hash-link" href="#network-images">#</a></h2><p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image.</em></p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
|
||||
</span><Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://facebook.github.io/react/img/logo_og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
|
||||
Reference in New Issue
Block a user