Lecture 6: Navigation - CS50

1y ago
28 Views
1 Downloads
1.32 MB
47 Pages
Last View : 2d ago
Last Download : 5m ago
Upload by : Eli Jorgenson
Transcription

Lecture 6:NavigationBrent Vatne & Eric Vicenti

Previous Lecture User input with TextInputSimple input validationKeyboardAvoidingViewDebugging Errors and warnings Chrome Developer Tools React Native Inspector with react-devtoolsInstalling external libraries with npm

What is navigation? Navigation is a broad term that covers topics related to how you movebetween screens in your appWeb navigation is oriented around URLsMobile apps do not use URLs for navigating within the app*Navigation APIs completely different on iOS and Android Several React Native libraries provide a platform agnostic alternative We will talk about one of them today, React Navigation* Linking into a mobile app with a URL is known as deep inking.html

React Navigation and alternatives Two distinct approaches1. Implement mainly in JavaScript with React2. Implement mostly in native, expose an interface to JavaScript for existingnative navigation APIsReact Navigation takes approach #1Read more at https://v2.reactnavigation.org/docs/pitch.html s.html

Install React Navigation npm install react-navigation@2.0.0-beta.5 --saveThis will install the latest pre-release version at the time of writing. Typicallyyou would just write npm install react-navigation --save to use thelatest stable version.If you refer back to this in the future, keep in mind that this material is allspecific to the 2.x series of releases.

Navigators, routes, and screen components A navigator is a component that implements a navigation pattern (eg: tabs)Each navigator must have one or more routes.A navigator is a parent of a route. A route is a child of a navigator.Each route must have a name and a screen component. The name is usually unique across the app The screen component is a React component that is rendered when the routeis active. The screen component can also be another navigator.

Switch Navigator Display one screen at a timeInactive screens are unmountedThe only action a user can take to switch from one route to another

Switch NavigatorScreen onetwoGo to onetwo

Creating a navigatorimport { createSwitchNavigator } from 'react-navigation';const AppNavigator createSwitchNavigator({"RouteNameOne": ScreenComponentOne,"RouteNameTwo": ScreenComponentTwo,});

Rendering a navigatorconst AppNavigator createSwitchNavigator({"RouteNameOne": ScreenComponentOne,"RouteNameTwo": ScreenComponentTwo,});export default class App extends React.Component {render() {return AppNavigator / }} createSwitchNavigator is a function that returns a React componentWe render the component in our root App component. Usually we only explicitlyrender one navigator per app because navigators are composable.

Higher order components createSwitchNavigator is a Higher Order Component: it is a function thatreturns a React component.“A higher-order component (HOC) is an advanced technique in React forreusing component logic.” This is similar to higher order functions, which are functions that either takefunctions as arguments or return a function as a result.Read more at tml

Navigating to another routeclass ScreenComponentOne extends React.Component {render() {return ( Buttontitle "Go to two"onPress {() this.props.navigation.navigate('RouteNameTwo')}/ );}}

The navigation prop h(.)isFocused(.)addListener(.)state* The navigation prop is passed in to the screen component for each route.Full reference: p.html

screenPropsexport default class App extends React.Component {render() {return AppNavigator screenProps {/* object here */} / }} Made available to every screen component in the navigator.Perfectly fine for very small applications and prototyping but inefficient for mostmeaningful applications - every route in your app will re-render whenscreenProps changes. Use a state management library or the React Context APIinstead.

Stack Navigator Display one screen at a timeThe state of inactive screens is maintained and they remain mountedPlatform-specific layout, animations, and gestures Screens are stacked on top of each otheriOS: screens slide in from right to left, can be dismissed with left to rightgesture. Modal screens slide in from bottom to top, can be dismissed with topto bottom gesture. Android: screens fade in on top of each other, no dismiss gesture. Hardwareback button dismisses the active screen.Users can push and pop items from the stack, replace the current item, andvarious other

Stack NavigatorScreen onetwoScreen threeGoGototothreetwo

Stack NavigatorScreen oneScreen twoScreen threeGo to twoGo to three

Creating a StackNavigatorimport { createStackNavigator } from 'react-navigation';const AppNavigator createStackNavigator({"RouteNameOne": ScreenComponentOne,"RouteNameTwo": ScreenComponentTwo,});

Navigating to another routeclass ScreenComponentOne extends React.Component {render() {return ( Buttontitle "Go to two"onPress {() this.props.navigation.navigate('RouteNameTwo')}/ );}}

Returning to the previously active routeclass ScreenComponentThree extends React.Component {render() {return ( Buttontitle "Go back"onPress {() this.props.navigation.goBack()}/ );}}

Configuring navigationOptions derRightFull list: r.html#navigationoptions.

Using params to pass state between routes navigate with paramsthis.props.navigation.navigate('RouteName', {paramName: 'value-of-param'}); setParams to update params for the routethis.props.navigation.setParams({paramName: 'new-value-of-param',}); getParam to read a paramthis.props.navigation.getParam('paramName', 'default-value');

// It's time for us to take a short breakthis.props.navigation.navigate('BreakTime');

// Break time is overthis.props.navigation.goBack();

Add button to header with navigationOptions headerLeftheaderRightFull list: r.html#navigationoptions.

// Jump to a screen, identified by route namenavigate('MyRouteName', { paramName: 'param-value' });// “Push” a new screen, even if it already is in the stackpush('MyRouteName');

Stack specific navigation actions push(.)pop(.)popToTop(.)replace(.)More information: p.html#.

Composing navigators Navigators can be composed when one type of navigation visually appears tobe inside another navigatorA navigator can be the Screen Component of another navigatorThe app should only contain one top-level navigatorYou can navigate() to any route in the appgoBack() works for the whole app, supports Android back button

Composing navigatorsconst MyStackNavigator createStackNavigator({"Home": HomeScreen,"AddContact": AddContactScreen,});const AppNavigator createSwitchNavigator({"Login": LoginScreen,"Main": MyStackNavigator,});

Do not render a navigator inside a screenclass MyScreen extends React.Component {render() {return MyStackNavigator / ;}}Instead, set as a screen within the AppNavigatorconst AppNavigator createSwitchNavigator({"Main": MyStackNavigator,});

Tab navigators Display one screen at a timeThe state of inactive screens is maintainedPlatform-specific layout, animations, and gestures abNavigatorcreateBottomTabNavigatorThe navigate() action is used to switch to different tabsgoBack() can be called to go back to the first tab The tab navigator goBack behavior is configurable

Tab navigatorsScreen onetwoOneTwoTwo

Tab navigatorsScreen oneScreen twoTwo OneTwo

Creating a tab navigatorconst AppNavigator createBottomTabNavigator({"TabOne": ScreenComponentOne,"TabTwo": ScreenComponentTwo,});export default class App extends React.Component {render() {return AppNavigator / }}

Configure tab bar settingsconst MainTabs createBottomTabNavigator({.},{tabBarOptions: {activeTintColor: "#a41034"}});Full reference for tabBarOptions: html#.

Configure tab iconsMainStack.navigationOptions {tabBarIcon: ({ focused, tintColor }) ( Ioniconsname { ios-contacts {focused ? "" : "-outline"} }size {25}color {tintColor}/ )};Full reference of options: html#.

Use common icon packs# Install it in your shellnpm install --save react-native-vector-icons// Import a supported icon set in your codeimport Ionicons from "react-native-vector-icons/Ionicons";// Use it as a React component Ionicons name "md-checkmark" size {25} color "#000" / See other icon sets that are included: https://expo.github.io/vector-icons/

React Navigation Resources-React Navigation DocumentationReact Navigation API ReferenceNavigationPlayground example source code

Chrome Developer Tools React Native Inspector with react-devtools Installing external libraries with npm. What is navigation? Navigation is a broad term that covers topics related to how you move between screens in your app Web navigation is oriented around URLs

Related Documents:

Introduction of Chemical Reaction Engineering Introduction about Chemical Engineering 0:31:15 0:31:09. Lecture 14 Lecture 15 Lecture 16 Lecture 17 Lecture 18 Lecture 19 Lecture 20 Lecture 21 Lecture 22 Lecture 23 Lecture 24 Lecture 25 Lecture 26 Lecture 27 Lecture 28 Lecture

Lecture 1: A Beginner's Guide Lecture 2: Introduction to Programming Lecture 3: Introduction to C, structure of C programming Lecture 4: Elements of C Lecture 5: Variables, Statements, Expressions Lecture 6: Input-Output in C Lecture 7: Formatted Input-Output Lecture 8: Operators Lecture 9: Operators continued

Accessing a solution in CS50 Vault to some problem prior to (re-)submitting your own. Asking a classmate to see his or her solution to a problem set’s problem before (re-)submitting your own. Decompiling, deobfuscating, or disassembling the staff’s solutions to problem sets.

Lecture 1: Introduction and Orientation. Lecture 2: Overview of Electronic Materials . Lecture 3: Free electron Fermi gas . Lecture 4: Energy bands . Lecture 5: Carrier Concentration in Semiconductors . Lecture 6: Shallow dopants and Deep -level traps . Lecture 7: Silicon Materials . Lecture 8: Oxidation. Lecture

TOEFL Listening Lecture 35 184 TOEFL Listening Lecture 36 189 TOEFL Listening Lecture 37 194 TOEFL Listening Lecture 38 199 TOEFL Listening Lecture 39 204 TOEFL Listening Lecture 40 209 TOEFL Listening Lecture 41 214 TOEFL Listening Lecture 42 219 TOEFL Listening Lecture 43 225 COPYRIGHT 2016

Navigation User Manual . 1.Home Menu. First Page . Second Page Third Page . 2. How to use Navigation. Enter the second menu. Click icon “Navigation”,access into Navigation function. Please refer to the instruction manual for navigation software . 1 2 . Common apps Car info . Home. Menu . 1.Player .

Chevrolet Equinox and GMC Terrain Navigation System (Include Mex) - 2012 Black plate (4,1) 4 Infotainment System Overview Read this manual thoroughly to become familiar with how the navigation system operates. The navigation system includes navigation and audio functions. Keeping your eyes on the road and your mind on the drive is important for .

PARTS LOCATION ENGINE ROOM RELAY BLOCK, RELAY BLOCK - BK/UP LP RELAY - DOME FUSE . owned by Bluetooth SIG, Inc. I101463E01 Cellular Tower Cellular Phone (Bluetooth type) . MPX DTC is output B Go to MULTIPLEX COMMUNICATION SYSTEM. NS–16 NAVIGATION – NAVIGATION SYSTEM NS

NAVIGATION SYSTEM RNAV2 Precision Navigation System (p/n 4600-101) is an innovative electronic navigation system that can be either mounted in the DPD to enable precision navigation by combat divers, or without divers for Autonomous Unmanned Vehicle (AUV) missions. Additionally, the RNAV2

Navigation System on page 2-2. J. ROUTE Key. See “Hard Keys” under Using the Navigation System on page 2-2. K. MENU Key. See “Hard Keys” under Using the Navigation System on page 2-2. L. TILT Key. See “Hard Keys” under Using the Navigation System on page 2-2. Getting Started Before you begi

Button. See Navigation Audio System on page 3-2 for more information. P. Map DVD Slot. See “Nav (Navigation)” under Configure Menu on page 2-26for information on how to load/unload a map DVD. Q. f (Tune/Sound) knob. See Navigation Audio System on page 3-2for more information. R. AUDIO Key. See Navigation Audio System on page 3-2for more .File Size: 1MB

Jul 24, 2017 · A. Aids to Navigation Manual. 1-1 B. Short Range Aids to Navigation Systems. 1-2 C. Coast Guard Authority. 1-3 D. Short Range Aids to Navigation Organization. 1-6 CHAPTER 2 - GENERAL ADMINISTRATION OF THE SHORT RANGE AIDS TO NAVIGATION SYSTEM 2-1 A. Management Principles. 2-1 B. Administrative Procedures. 2-2

only inertial navigation system. Objective of the proposal: The objective of the proposal is a combination of the existing inertial navigation system (INS) with global position system (GPS) for more accurate navigation of the launchers. The project's product will be navigation algorithms software package and hardware units.

navigation in rural environments through a novel mapless driving framework that combines sparse topological maps for global navigation with a sensor-based perception system for local navigation. First, a local navigation goal within the sensor view of the vehicle is chosen as a waypoint leading towards the global goal.

the autonomous navigation of these systems. The global positioning system (GPS) is used for external autonomous navigation [1]. Because GPS signals are typically absent or weak indoors, autonomous navigation is difficult [2]. There are various approaches for independent indoor navigation which have been proposed in recent years.

The PBN concept represents a shift from sensor-based to performance-based navigation. Performance requirements are identified in navigation specifications, which also identify the choice of navigation sensors and equipment that may be used to meet the performance requirements. These navigation specifications are defined at

Introduction to Quantum Field Theory for Mathematicians Lecture notes for Math 273, Stanford, Fall 2018 Sourav Chatterjee (Based on a forthcoming textbook by Michel Talagrand) Contents Lecture 1. Introduction 1 Lecture 2. The postulates of quantum mechanics 5 Lecture 3. Position and momentum operators 9 Lecture 4. Time evolution 13 Lecture 5. Many particle states 19 Lecture 6. Bosonic Fock .

Lecture 11 – Eigenvectors and diagonalization Lecture 12 – Jordan canonical form Lecture 13 – Linear dynamical systems with inputs and outputs Lecture 14 – Example: Aircraft dynamics Lecture 15 – Symmetric matrices, quadratic forms, matrix norm, and SVD Lecture 16 – SVD applications

MEDICAL RENAL PHYSIOLOGY (2 credit hours) Lecture 1: Introduction to Renal Physiology Lecture 2: General Functions of the Kidney, Renal Anatomy Lecture 3: Clearance I Lecture 4: Clearance II Problem Set 1: Clearance Lecture 5: Renal Hemodynamics I Lecture 6: Renal Hemodynamics II Lecture 7: Renal Hemodynam

Basic counselling skills for drug dependence treatment Drug dependence and basic counselling skills Module 1 Special considerations when involving families in drug dependence treatment. Basic counselling skills for drug dependence treatment Workshop 1. At the end of this workshop you will be able to: Training objectives Identify a minimum of 4 counselling strategies useful in drug abuse .