54b03328b1
* initial bootstrap on documentation * Add EXPO_USAGE and MIgrating page * add all pages * add sponsors section to index * theme * configs * clipboard button * remove blog from docker * start API.md * minor updates
33 lines
1002 B
Markdown
33 lines
1002 B
Markdown
---
|
|
id: react-navigation
|
|
title: React Navigation
|
|
sidebar_label: React Navigation
|
|
---
|
|
|
|
React-navigation does not unmount components when switching between tabs. So when you leave and return back to the screen with the camera component it will just be black view. So a good solution is to use `componentDidMount` and added two listeners `willFocus` and `willBlur` to help you mount and unmount the views.
|
|
|
|
```jsx
|
|
componentDidMount() {
|
|
const { navigation } = this.props;
|
|
navigation.addListener('willFocus', () =>
|
|
this.setState({ focusedScreen: true })
|
|
);
|
|
navigation.addListener('willBlur', () =>
|
|
this.setState({ focusedScreen: false })
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { hasCameraPermission, focusedScreen } = this.state;
|
|
if (hasCameraPermission === null) {
|
|
return <View />;
|
|
} else if (hasCameraPermission === false) {
|
|
return <Text>No access to camera</Text>;
|
|
} else if (focusedScreen){
|
|
return (this.cameraView());
|
|
} else {
|
|
return <View />;
|
|
}
|
|
}
|
|
```
|