In this lab, you’ll continue work on programming and meet with your team.
In the previous lab, we put all the UI code in one large App.js
file. As the systems get larger, this is unsustainable. In this lab, we
refactor that solution to modularize the system, and then add a couple new
features.
Make a full copy of your solution to the previous lab and then do the following modifications. The resulting UI will look pretty much like the original, see the image to the right.
Refactoring
Create a new ./styles/global.js
file
and add this code template:
Here, theimport { StyleSheet } from 'react-native'; export const globalStyles = StyleSheet.create({ container: { flex: 1, padding: 20, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, });
container
field holds the CSS
specification currently hard-coded into the View
specifications.
Modify App.js
by importing the
global style specifications (toward the top,
add: import { globalStyles } from
'./styles/global';
) and use the
imported specification in the View components
(using:
<View style={globalStyles.container}>…
). You can take the opportunity to add
the use of the title
style for all
movie title texts, which will make the titles
larger and, thus, easier to click.
Screens — Modularize the screen component definitions as follows:
Create a new directory, ./screens
and
cut/paste each of the screen component functions
into its own file. Start by moving the home screen
component into home.js
, which
should look like this:
// Include all the required imports. export default function HomeScreen({ navigation }) { // Leave the remainder of the component unchanged. }
Import the home screen component from new module
into App.js
(using: import
HomeScreen from "./screens/home";
).
New Features
About page — We now add a new
“About” screen. Create a new ./screens/about.js
file, import it into App.js
and add a new about
component entry to the StackNavigation container.
Note, that at this point, the about component exists but the app provides no way to display it to the user. To do this, you can simply add a button (suitably formatted) to your homepage (see lab 2 for details on this), or you can add an about button to the app header bar. You can choose to do the former, which is easier, or the latter, which is more interesting. The example output above uses the latter.
Shared Header — To add a button to
the app header bar, and share that bar throughout the
application, Add this directory/file to your system - shared/header.js, and then
in App.js
, import the header component and then
replace the options
settings in
App.js
for the home and details pages to:
options={({ navigation }) => ({ headerRight: () => ( <Header navigation={navigation}/> ) })}
The sample system uses a global style setting for the about icon (see the circled question mark in the upper right). You can format your icon as you see fit.
When complete, your application file structure should look as shown on the right.
When your application is running, create a text file
(README.md
) in the root of your lab directory that
documents the application and includes one-sentence or one-phrase
answers to the following:
export
commands do?Submit this application by pushing it to your cs262
repo.
Today, we focus on your domain model, but will update all your management, analysis and design materials.
Meet with your teammates to build a domain model for your project.
This domain model will serve as the blueprint for the database schedule you build later in the project.