Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Native - Coggle Diagram
React Native
Mobile Navigation
Options
react-navigation
use this
in JS
react-native-navigation
advanced
modify native components
Setup
npm install
Navigation in HTML
window.history
back
go(-1)
forward
go(1)
go
navigators
Switch
one screen at a time
no "back"
authentification flow
Stack
go back and forth
like History API
screens placed on a stack
Tab
establish a main menu for different sections/parts of an application
Drawer
drawer can be exposed/hidden
for options and settings
Specialized actions associated
e.g. navigate
Screens
React class component
extends React.Component
navigation prop
onPress={() => this.props.navigation.navigate('')}
render()
functions
return ()
placed inside NavigationContainer as <>
NavigationContainer
Navigator
screen options
Screen
options
Scrollable View
useScrollToTop
useScrollToTop(ref)
ScrollView
<ScrollView ref={ref}>
Date objects
var date = new Date()
Thu Nov 07 2019...
user
var json = JSON.stringy(date)
"2019-11-07"
server
deserialize (server -> user)
json = "server"
var date = new Date(JSON.parse(json))
Animation
Respond to gestures with behaviors on the interface
Animated
time-based animation
Animated.Value
Connect to style
Animated.timing()
Animated.sequence()
Animated.spring()
Animated.interpolate()
Easing
Did not change layout of screen
LayoutAnimation
animates entire screen when layout changes
e.g. when element removed from screen
before setState()
Gestures
Why?
Direct/absolute mapping between input space and screen space
PanResponder
recognize multi-touch gestures (drag, swipe)
Initialize: create PanResponder object with event handlers - things to recognize
Event Handler
nativeEvent
e.g. location
gestureState
property of gesture
e.g. velocity
onPanResponderMove: (event, gestureState) => {}
onPanResonderGrant
gesture starts
onPanResponderMove
move distance
gesture distance
onPanResponderRelease
onPanResponderTerminate
onShouldBlockNativeResponder
Associate gestures with screens
<View {...this._panResponder.panHandlers}> as props