The document discusses how to build a movie explorer app using React Native and the Navigator component. It covers setting up the basic navigator with initial and render scene functions. It then discusses adding multiple scenes, manipulating the route stack, adding navigation bars, and transitions. It also covers splitting code into separate scene components, passing data between scenes, using the ListView component to display search results, making API calls to the OMDb API, and displaying detailed movie information in a second scene.
3. Navigator
• Navigator controls and handles the transition
between different scenes (screens) in the app.
• Navigator can switch the scenes to be display in
the apps.
• To setup the navigator, you provide one or more
objects call routes, to identify each scene.
• You also provide a renderScene function that
renders the scene for each route object.
5. Navigator’s Props
• initialRoute : Default route object when the app is
started.
• renderScene: Function that read route object and
return the JSX (UI) of that scene.
7. Navigator’s Route Stack
• initialRouteStack props : Supplying the Navigator’s All
possible routes object array.
• navigation.push(): Adding scene into the route stack.
• navigation.pop(): Remove the latest scene from the route
stack
• navigation.popN(2): Remove the latest 2 scene from stack.
{title: ‘First Scene’,
index: 0}
{title: ‘Second Scene’,
index: 1}
Displaying Scene
10. Some Other Route Stack
Manipulation Methods
• navigation.jumpTo(route): Transition to an existing
scene without unmounting.
• navigation.jumpForward(): Jump forward to the next
scene in the route stack.
• navigation.jumpBack(): Jump backward without
unmounting the current scene.
• navigation.popToTop(): Pop to the first scene in the
stack, unmounting every other scene.
15. • navigationBar props : Adding
UI for navigation bar.
• routeMapper’s props of
Navigator.NavigationBar:
define the UI of navigation
bar.
• LeftButton: UI for Left Part
of Nav Bar
• RightButton: UI for Right
Part of Nav Bar
• Title: UI for Center Part of
Nav Bar
17. • We can add transition in configureScene prop.
• There are so many transition available.
• Navigator.SceneConfigs.PushFromRight (default)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
21. Splitting Code
• Each scene should belong to a component (having its
own file).
• We need to change the Navigator’s renderScene
method to support the components rendering.
• We create two new files. Each file having a scene
component.
• ListScreen component in ListScreen.js
• DetailScreen component in DetailScreen.js
28. List View
• A core component designed for efficient display of
vertically scrolling lists of changing data.
• List View requires a ListView.Datasource to
manipulate the display data. Its simplest form is a
simple array of data.
• List View render each item of data according to
ListView.RenderRow callback.
29.
30. List View Benefits over
Custom-made UI
• ListView supports advanced features such as
• Scrolling
• Section Segmentation
• Sticky Section Headers
• Header and Footer Supports
• Callback when reaching the end of the available data
(onEndReached), which can enable infinite browsing.
• Re-render only when necessary + Several Performance
Optimization
33. {
"Search": [
{
"Title": "Harry Potter and the Deathly Hallows: Part 2",
"Year": "2011",
"imdbID": "tt1201607",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/V1_SX300.jpg"
},
{
"Title": "Harry Potter and the Sorcerer's Stone",
"Year": "2001",
"imdbID": "tt0241527",
"Type": "movie",
"Poster": “http://ia.media-imdb.com/images/M/..1_SX300.jpg”
},
…
},
http://www.omdbapi.com/?s=Harry
36. iOS Block HTTP connection
• By default, only HTTPS connection is allowed in iOS.
• To remove this restriction, go to {project folder}/ios/movie/info.plist
• At <Key>NSAppTransportSecurity<Key> (line 41)
• Replace as shown below and save.