如何避免在Android中重新绘制相机

Question

所以我使用的是react原生二维码扫描仪，当我在应用程序中的选项卡之间切换时，二维码扫描仪在Android中变黑。我读它是因为在安卓系统中，组件不会卸载。我不得不添加一个isFocused if语句，但它导致整个事件重新发布，这是一种可怕的用户体验。有没有一种方法可以在不使用if语句的情况下使其变得更好？谢谢

import { withNavigationFocus } from 'react-navigation';
class ScannerScreen extends Component {
...
const { isFocused } = this.props
...
{isFocused ? 
<QRCodeScanner
showMarker={true} 
vibrate={false}
ref={(camera) => {this.state.scanner = camera}}
cameraStyle={{overflow: 'hidden', height: QRHeight}}
onRead={read}
bottomContent={<BottomQRScanner/>}
/>
:
null
}
}
export default withNavigationFocus(ScannerScreen)

Answer 1

好的，您可以将其添加到您的componentdidmount/componentswillmount&amp；删除组件中的listner将卸载或使用effecthook

useEffect(() => {
const unsubscribe = navigation.addListener('willFocus', () => {
//Your function that you want to execute
});
return () => {
unsubscribe.remove();
};
});

或者在新版本中只做这个

从"反应导航"导入｛NavigationEvents｝；

使用此

<NavigationEvents onDidFocus={() => console.log('I am triggered')} />

onDidFocus事件将在页面聚焦时调用。