Question

我想知道如何覆盖React本机库中的默认props。
以下是该库：

因此，如果我想调用库，我只需使用

import qrcode from 'qrcodescanner'



<qrcode showMarker = {true} /> // change the showMarker props from false to true

我想将默认值从false更改为true，有人可以解决吗？

export default class QRCodeScanner extends Component {

  static defaultProps = {
    onRead: () => console.log('QR code scanned!'),
    reactivate: false,
    vibrate: true,
    reactivateTimeout: 0,
    fadeIn: true,
    showMarker: false,
    cameraType: 'back',
    permissionDialogTitle: 'Info',
    permissionDialogMessage: 'Need camera permission',
    checkAndroid6Permissions: false,
    cameraProps: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      scanning: false,
      fadeInOpacity: new Animated.Value(0),
      isAuthorized: false,
      isAuthorizationChecked: false,
      disableVibrationByUser: false,
    };

    this._handleBarCodeRead = this._handleBarCodeRead.bind(this);
  }

  render() {
    return (
      <View style={[styles.mainContainer, this.props.containerStyle]}>
        <View style={[styles.infoView, this.props.topViewStyle]}>
          {this._renderTopContent()}
        </View>
        {this._renderCamera()}
        <View style={[styles.infoView, this.props.bottomViewStyle]}>
          {this._renderBottomContent()}
        </View>
      </View>
    );
  }
}

Answer 1

您需要派生该库并更改默认属性，如下所示：

export default class QRCodeScanner extends Component {

  static defaultProps = {
    onRead: () => console.log('QR code scanned!'),
    reactivate: false,
    vibrate: true,
    reactivateTimeout: 0,
    fadeIn: true,

    // update this default prop to true
    showMarker: true,

    cameraType: 'back',
    permissionDialogTitle: 'Info',
    permissionDialogMessage: 'Need camera permission',
    checkAndroid6Permissions: false,
    cameraProps: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      scanning: false,
      fadeInOpacity: new Animated.Value(0),
      isAuthorized: false,
      isAuthorizationChecked: false,
      disableVibrationByUser: false,
    };

    this._handleBarCodeRead = this._handleBarCodeRead.bind(this);
  }

  render() {
    return (
      <View style={[styles.mainContainer, this.props.containerStyle]}>
        <View style={[styles.infoView, this.props.topViewStyle]}>
          {this._renderTopContent()}
        </View>
        {this._renderCamera()}
        <View style={[styles.infoView, this.props.bottomViewStyle]}>
          {this._renderBottomContent()}
        </View>
      </View>
    );
  }
}

Answer 2

这不是一个好主意，也不建议使用

但是，如果这是最后一件事，那么您可以

转到node_modules找到您的库并在本地进行更改。

注意：

一开始不是个好主意
仅用于解决方法
将仅对您和该项目可用
如果再次安装了库，它将被删除

如何在React本机库中覆盖道具

2 个答案: