更新TabNavigator中的react-native组件

时间:2017-09-11 16:54:13

标签: react-native react-navigation react-native-camera

使用react-native和react-navigation我需要在每次用户输入特定选项卡时控制条件渲染。 当使用enter第一次启用react-native-camera时,在onBarCodeRead之后我将showCamera标志设置为false,调用redux action并将用户重定向到另一个screem。 现在,当用户再次进入此选项卡时,我需要将此标志设置为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 });
  }

0 个答案:

没有答案