https://facebook.github.io/react-native/docs/navigation
https://reactnavigation.org/docs/en/stack-navigator.html
https://reactjs.org/docs/react-component.html
https://flaviocopes.com/react-state-vs-props/
The Navigation Stack
In App.js, we create a bottom navigator. It takes a parameter of an object where each key is the string title of the tab.
In our case, it is ‘Home’, ‘Contracts’, ‘Schedule’, ‘Reports’.
the keys matches to an object value returned by function createStackNavigator.
createStackNavigator creates a stack navigator where one screen can navigate to the next.
|
1 2 3 4 5 6 7 8 |
const AppStack = createBottomTabNavigator( { Home: createStackNavigator(...), Contracts: createStackNavigator(...), Schedule: createStackNavigator(...), Reports: createStackNavigator(...), }, ); |
Inside the createStackNavigator, we have two important parameters. One is an object of all the components you want to add to the navigation stack. That way you can navigate from one component to the the next. The other parameter is for styling.
|
1 2 3 4 5 6 7 8 9 |
Contracts: createStackNavigator( { ContractScreen, TranshipmentScreen: TranshipmentPage, TranshipmentDetailsScreen: TranshipmentDetails, CCTVScreen, }, stackDefaultNavigationOptions, ), |
Hence, in our example, for the tab ‘Contracts’, we give is a stack of components, along with a styling called stackDefaultNavigationOptions.
In this stack of components, its first page is ContractScreen. Notice CCTVScreen on the bottom. That is the name of our custom cctv component that we want to navigate from other components.
we import cctv component like so:
|
1 |
import CCTVScreen from './src/scenes/App/CCTVScreen'; |
Navigating to CCTV
First let’s implement the navigating part. We simply create a handler function. In the implementation, we destructure navigation property from this.props.
Then we use ‘navigate’ and give it the string of the component name ‘CCTVScreen’. Finally, we give it an object of transshipment. Now, this object is written like so: {‘transshipment’ : transshipment}, to designate that the property name is ‘transshipment’, and the value is of object transshipment. We all shorthand it into {transshipment}
|
1 2 3 4 5 6 7 8 9 |
onCCTVclick = (transshipment) => { const { navigation } = this.props; // other code navigation.navigate('CCTVScreen', { transshipment, }); } |
Somewhere else, you can have a button or some click UI, and then attach this handler function onCCTVclick to it.
CCTV component
Now we see how the component is implemented.
The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.
|
1 2 3 4 5 |
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } |
When called, it should examine:
1) this.props
2) this.state
Using de-structuring, we extract data from these two objects and use them for display.
In the below example, you can see that we extracted cameraViews from this.props. Then used it in a ScrollView to display Images.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { const { cameraViews, isLoading } = this.props; if (isLoading) { return <Loading isLoading />; } return ( <View style={styles.outerContainer}> <ScrollView> // use cameraViews object here </ScrollView> </View> ); } |
In a React component, props are variables passed to it by its parent component. like this:
|
1 2 3 4 5 6 |
<FullPerson firstName='Tree' lastName='Rock' age=30 color='orange' /> |
In this case, FullPerson component will have these properties in its prop object:
this.prop.firstName
this.prop.lastName
this.prop.age
this.prop.color
State on the other hand is still variables, but directly initialized and managed by the component.
|
1 2 3 4 5 6 |
class FullPerson extends React.Component { constructor(props) { super(props) console.log(props.color) } } |
Props can be used to set the internal state based on a prop value in the constructor, like this:
|
1 2 3 4 5 6 |
class FullPerson extends React.Component { constructor(props) { super(props) this.state.fullName = props.firstName + ', ' + props.lastName; } } |
Props should never be changed in a child component, so if there’s something going on that alters some variable, that variable should belong to the component state.
Props are also used to allow child components to access methods defined in the parent component. This is a good way to centralize managing the state in the parent component, and avoid children to have the need to have their own state.
for example, in your ParentComponent, you have a centralized place to process data.
Basically, all data must be processed in function processDataHereOnly. Even when your ChildComponent has data, it should process it in your ParentComponent. In order for us to allow child components to access methods defined in the parent component, we pass in the parent component’s function interface using props property processIt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class ParentComponent extends React.Component { processDataHereOnly = (data) => { // heavy duty data processing here } render() { <ChildComponent processIt={this.processDataHereOnly} /> } } |
Then in your ChildComponent, simply pass in data as a parameter into this.prop.processIt, and execute it.
|
1 2 |
const { processIt } = this.props; processIt(); |
or
|
1 2 3 4 5 6 |
const { processIt } = this.props; <TouchableOpacity style={styles.cctvButtonContainer} onPress={() => processIt(data)} > </TouchableOpacity> |
in other words, you are also passing data from the child back to the parent.
To pass data from parent to child, use prop.
To pass data from child to parent, pass a callback to the child via prop. In the child component, pass data as a parameter into the callback, then execute it.