You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/Tutorial.md
+9-7Lines changed: 9 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ For this tutorial we'll be building a simple version of the Movies app that fetc
43
43
44
44
### Mocking data
45
45
46
-
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like:
46
+
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In `index.ios.js`:
47
47
48
48
```javascript
49
49
varMOCKED_MOVIES_DATA= [
@@ -53,7 +53,7 @@ var MOCKED_MOVIES_DATA = [
53
53
54
54
55
55
### Render a movie
56
-
56
+
gr
57
57
We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.
58
58
59
59
```javascript
@@ -157,17 +157,19 @@ Not too much has changed, we added a container around the Texts and then moved t
157
157
},
158
158
```
159
159
160
-
For layout we use FlexBox which has [great documentation](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
160
+
We use FlexBox for layout - see [this great guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to learn more about it.
161
+
162
+
In the above code snippet, we simply added `flexDirection: 'row'` that will make children of our main container to be layed out horizontally instead of vertically.
161
163
162
-
We simply added `flexDirection: 'row'` which means that children are layed out horizontally instead of vertically.
164
+
Now add another style to the JS `style` object:
163
165
164
166
```javascript
165
167
rightContainer: {
166
168
flex:1,
167
169
},
168
170
```
169
171
170
-
This means that the rightContainer takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a backgroundColor to rightContainer and then try removing the `flex: 1`. You'll see that this causes the container's size to be the minimum size that fits its children.
172
+
This means that the `rightContainer` takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a `backgroundColor` to `rightContainer` and then try removing the `flex: 1`. You'll see that this causes the container's size to be the minimum size that fits its children.
Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.
207
+
Add some initial state to our application so that we can check `this.state.movies === null` to determine whether the movies data has been loaded or not. We can set this data when the response comes back with `this.setState({movies: moviesData})`. Add this code just above the render function inside our React class.
206
208
207
209
```javascript
208
210
getInitialState:function() {
@@ -220,7 +222,7 @@ We want to send off the request after the component has finished loading. compon
220
222
},
221
223
```
222
224
223
-
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.
225
+
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.
0 commit comments