Preface |
|
ix | |
|
|
1 | (4) |
|
Advantages of React Native |
|
|
2 | (2) |
|
|
2 | (1) |
|
Code Reuse and Knowledge Sharing |
|
|
3 | (1) |
|
|
4 | (1) |
|
|
4 | (1) |
|
2 Working with React Native |
|
|
5 | (8) |
|
How Does React Native Work? |
|
|
5 | (2) |
|
|
7 | (1) |
|
Creating Components in React Native |
|
|
8 | (3) |
|
|
8 | (1) |
|
|
9 | (1) |
|
Styling Native Components |
|
|
10 | (1) |
|
|
11 | (1) |
|
|
12 | (1) |
|
3 Building Your First Application |
|
|
13 | (26) |
|
Setting Up Your Environment |
|
|
13 | (1) |
|
Developer Setup: Create React Native App |
|
|
14 | (2) |
|
Creating Your First Application with create-react-native-app |
|
|
14 | (1) |
|
Previewing Your App on iOS or Android |
|
|
15 | (1) |
|
Developer Setup: The Traditional Approach |
|
|
16 | (3) |
|
Creating Your First Application with react-native |
|
|
16 | (1) |
|
|
17 | (1) |
|
Running Your App on Android |
|
|
18 | (1) |
|
Exploring the Sample Code |
|
|
19 | (3) |
|
|
22 | (15) |
|
|
24 | (2) |
|
|
26 | (3) |
|
Fetching Data from the Web |
|
|
29 | (3) |
|
Adding a Background Image |
|
|
32 | (2) |
|
|
34 | (3) |
|
|
37 | (2) |
|
|
39 | (34) |
|
Analogies Between HTML Elements and Native Components |
|
|
39 | (5) |
|
|
40 | (2) |
|
|
42 | (2) |
|
Working with Touch and Gestures |
|
|
44 | (10) |
|
Creating Basic Interactions with <Button> |
|
|
44 | (1) |
|
Using the <TouchableHighlight> Component |
|
|
45 | (3) |
|
Using the PanResponder Class |
|
|
48 | (6) |
|
|
54 | (15) |
|
Using the Basic <FlatList> Component |
|
|
56 | (3) |
|
Updating the <FlatList> Contents |
|
|
59 | (4) |
|
|
63 | (2) |
|
Working with <SectionList> |
|
|
65 | (4) |
|
|
69 | (1) |
|
Other Organizational Components |
|
|
70 | (1) |
|
|
71 | (2) |
|
|
73 | (18) |
|
Declaring and Manipulating Styles |
|
|
73 | (4) |
|
|
74 | (1) |
|
|
75 | (1) |
|
|
75 | (1) |
|
|
76 | (1) |
|
Organization and Inheritance |
|
|
77 | (3) |
|
|
77 | (1) |
|
|
78 | (1) |
|
Reusing and Sharing Styles |
|
|
79 | (1) |
|
Positioning and Designing Layouts |
|
|
80 | (8) |
|
Using Layouts with Flexbox |
|
|
80 | (4) |
|
Using Absolute Positioning |
|
|
84 | (1) |
|
|
85 | (3) |
|
|
88 | (3) |
|
|
91 | (22) |
|
|
91 | (8) |
|
Reading the User's Location |
|
|
92 | (1) |
|
|
93 | (1) |
|
Testing Geolocation in Emulated Devices |
|
|
94 | (1) |
|
Watching the User's Location |
|
|
95 | (1) |
|
Working Around Limitations |
|
|
95 | (1) |
|
Updating the Weather Application |
|
|
96 | (3) |
|
Accessing the User's Images and Camera |
|
|
99 | (4) |
|
Interacting with the CameraRoll Module |
|
|
99 | (1) |
|
Requesting Images with GetPhotoParams |
|
|
100 | (1) |
|
Rendering an Image from the Camera Roll |
|
|
101 | (1) |
|
Uploading an Image to a Server |
|
|
102 | (1) |
|
Storing Persistent Data with AsyncStorage |
|
|
103 | (1) |
|
The Smarter Weather Application |
|
|
104 | (8) |
|
The <WeatherProject> Component |
|
|
104 | (3) |
|
|
107 | (1) |
|
|
108 | (1) |
|
The <LocationButton> Component |
|
|
109 | (1) |
|
The <PhotoBackdrop> Component |
|
|
110 | (2) |
|
|
112 | (1) |
|
7 Modules and Native Code |
|
|
113 | (20) |
|
Installing JavaScript Libraries with npm |
|
|
113 | (2) |
|
Installing Third-Party Components with Native Code |
|
|
115 | (1) |
|
Using the Video Component |
|
|
116 | (1) |
|
Objective-C Native Modules |
|
|
116 | (8) |
|
Writing an Objective-C Native Module for iOS |
|
|
116 | (5) |
|
Exploring react-native-video for iOS |
|
|
121 | (3) |
|
|
124 | (6) |
|
Writing a Java Native Module for Android |
|
|
124 | (3) |
|
Exploring react-native-video for Java |
|
|
127 | (3) |
|
Cross-Platform Native Modules |
|
|
130 | (1) |
|
|
130 | (3) |
|
|
133 | (6) |
|
iOS- or Android-Only Components |
|
|
133 | (1) |
|
Components with Platform-Specific Implementations |
|
|
134 | (3) |
|
Using Platform-Specific File Extensions |
|
|
134 | (3) |
|
Using the Platform Module |
|
|
137 | (1) |
|
When to Use Platform-Specific Components |
|
|
137 | (2) |
|
9 Debugging and Developer Tools |
|
|
139 | (24) |
|
JavaScript Debugging Practices, Translated |
|
|
139 | (6) |
|
Activating the Developer Options |
|
|
139 | (2) |
|
Debugging with console.log |
|
|
141 | (2) |
|
Using the JavaScript Debugger |
|
|
143 | (1) |
|
Working with the React Developer Tools |
|
|
144 | (1) |
|
React Native Debugging Tools |
|
|
145 | (5) |
|
|
145 | (1) |
|
Interpreting the Red Screen of Death |
|
|
146 | (4) |
|
Debugging Beyond JavaScript |
|
|
150 | (5) |
|
Common Development Environment Issues |
|
|
151 | (1) |
|
|
151 | (1) |
|
|
152 | (1) |
|
The React Native Packager |
|
|
153 | (1) |
|
Issues Deploying to an iOS Device |
|
|
153 | (2) |
|
|
155 | (1) |
|
|
155 | (5) |
|
|
156 | (1) |
|
|
156 | (1) |
|
Snapshot Testing with Jest |
|
|
157 | (3) |
|
|
160 | (1) |
|
|
161 | (2) |
|
10 Navigation and Structure in Larger Applications |
|
|
163 | (26) |
|
The Flashcard Application |
|
|
163 | (3) |
|
|
166 | (15) |
|
|
167 | (6) |
|
|
173 | (4) |
|
|
177 | (1) |
|
|
178 | (3) |
|
|
181 | (6) |
|
Creating a StackNavigator |
|
|
182 | (1) |
|
Using navigation.navigate to Transition Between Screens |
|
|
182 | (3) |
|
Configuring the Header with navigationOptions |
|
|
185 | (1) |
|
|
186 | (1) |
|
|
187 | (2) |
|
11 State Management in Larger Applications |
|
|
189 | (18) |
|
Using Redux to Manage State |
|
|
189 | (1) |
|
|
190 | (2) |
|
|
192 | (3) |
|
|
195 | (8) |
|
Persisting Data with AsyncStorage |
|
|
203 | (3) |
|
|
206 | (1) |
|
|
207 | (14) |
|
A Modem JavaScript Syntax |
|
|
209 | (6) |
|
B Deploying Your Application |
|
|
215 | (4) |
|
C Working with Expo Applications |
|
|
219 | (2) |
Index |
|
221 | |