|
26 | 26 | width<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span> |
27 | 27 | height<span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span> |
28 | 28 | <span class="token punctuation">}</span><span class="token punctuation">,</span> |
29 | | -<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>And lastly we need to apply this still to the Image component:</p><div class="prism language-javascript"> <Image |
| 29 | +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>And lastly we need to apply this style to the Image component:</p><div class="prism language-javascript"> <Image |
30 | 30 | source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> movie<span class="token punctuation">.</span>posters<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span><span class="token punctuation">}</span> |
31 | 31 | style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>thumbnail<span class="token punctuation">}</span> |
32 | 32 | <span class="token operator">/</span><span class="token operator">></span></div><p>Press cmd+R and the image should now render.</p><span><div class="tutorial-mock"> |
|
80 | 80 | <span class="token punctuation">}</span><span class="token punctuation">;</span> |
81 | 81 | <span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>We want to send off the request after the component has finished loading. componentDidMount is a function on React components that React will call exactly once just after the component has been loaded.</p><div class="prism language-javascript"> componentDidMount<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> |
82 | 82 | <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchData<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
83 | | - <span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Implement our fetchData function to actually make the request and handle the response. All you need to do is call this.setState({movies: data}) because the way React works is that setState actually triggers a re-render and then the render function will notice that |
84 | | -this.state.movies is no longer null.</p><div class="prism language-javascript"> fetchData<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> |
| 83 | + <span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>Implement our fetchData function to actually make the request and handle the response. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.</p><div class="prism language-javascript"> fetchData<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> |
85 | 84 | <span class="token function">fetch<span class="token punctuation">(</span></span>REQUEST_URL<span class="token punctuation">)</span> |
86 | 85 | <span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">json<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
87 | 86 | <span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> |
|
126 | 125 | <img src="/react-native/img/TutorialSingleFetched.png" /> |
127 | 126 | </div> |
128 | 127 |
|
129 | | -</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.</p><p>Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the hierarchy.</p><p>First thing's first, add the ListView require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> |
| 128 | +</span><h2><a class="anchor" name="listview"></a>ListView <a class="hash-link" href="#listview">#</a></h2><p>Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.</p><p>Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.</p><p>First thing's first, add the ListView require to the top of the file.</p><div class="prism language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> |
130 | 129 | AppRegistry<span class="token punctuation">,</span> |
131 | 130 | Image<span class="token punctuation">,</span> |
132 | 131 | ListView<span class="token punctuation">,</span> |
|
0 commit comments