反応ネイティブと反応ナビゲーションを使用して、ユーザーが特定のタブに入力するたびに条件付きレンダリングを制御する必要があります。初めてreact-native-cameraが有効になったときに使用すると、onBarCodeReadの後にshowCameraフラグをfalseに設定してreduxアクションを呼び出し、ユーザーを別の画面にリダイレクトします。ユーザーがこのタブに再び入るときに、このフラグを true に設定する必要がありますが、TabNavigator 内のコンポーネントは再構築されません。
render() {
if(!this.props.showCamera){
return null;
}else{
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={this.onBarCodeRead.bind(this)}
barCodeTypes={[
Camera.constants.BarCodeType.qr
]}>
<Image style={styles.borderImage} source={require("../../img/qrBorder.png")} />
</Camera>
</View>
);
}
}
onBarCodeRead(event) {
this.props.setShowCamera(false);
const { navigate } = this.props.navigation;
navigate('ContactAddDetail', { selectedId: event.data });
}