如何在React Native库中覆盖道具

Question

我想知道如何覆盖反应本机库中的默认道具。
以下是库：

因此，如果我想致电图书馆，我只需使用

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找到您的库并在本地更改。

注意：

• 首先不是一个好主意

• 仅用于解决方法

• 将适用于您，仅适用于此项目

• 如果再次安装了库，它将被删除