React native '；Null不是对象'；使用自定义的React本机npm包

我创建了一个用于SMS验证的定制npm包。这是一个PIN码输入，如果你通过短信收到PIN码，它会自动填写。它本身工作得很好。当我将npm包上载到Azure工件并尝试在另一个项目中使用它时，就会出现问题

配置

.npmrc

后

registry=https://pkgs.dev.azure.com/<url>/npm/registry/ 
                        
always-auth=true

GISMVerificationInput.tsx

import React from 'react';
import {StyleSheet, View} from 'react-native';
import GiSmsVerificationInput from '<company-name>/GiSmsVerificationInput';

interface AppProps {}

const App: React.FC<AppProps> = props => {
  return (
    <GiSmsVerificationInput
      onFulfill={code => console.log(code)}></GiSmsVerificationInput>
  );
};

const styles = StyleSheet.create({});

export default App;

import React, { useState, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
import RNOtpVerify from 'react-native-otp-verify';

/**
 * @param pinInput (Optional) Properties you want to pass to SmoothPinCodeInput
 * @param onFulfill Handler for when the user fills out pin
 * @param extractOTP (Optional) Extraction function for the OTP in the SMS
 */
interface SmsVerificationInputProps {
  /**
   * (Optional) Properties you want to pass to SmoothPinCodeInput
   */
  pinInputProps?: any;
  /**
   * Handler for when the user fills out pin
   * @param code PIN code entered
   */
  onFulfill: (code: string) => any;
  /**
   * (Optional) Extraction function for the OTP in the SMS
   * @param message Full SMS message received
   */
  extractOTP?: (message: string) => string;
}

/**
 * Verification PIN input component. Listens to SMS and fills out automatically if the right sms is sent.
 */
const SmsVerificationInput: React.FC<SmsVerificationInputProps> = (props) => {
  const [code, setCode] = useState('');
  /**
   * Function to get the hash that has to be appended to the message for the SMS listener to work.
   * Eg. SMS: This is your code: 1234 Uo4J1jaLso7
   */
  const getHash = () => {
    RNOtpVerify.getHash()
      .then((res) => console.log('Use Hash:', res[0]))
      .catch((err) => console.log(err));
  };

  /**
   * Start listening for SMS with the hash appended. Not triggered on an received SMS without the hash.
   * */
  const startListeningForOtp = () => {
    RNOtpVerify.getOtp()
      .then((p) => {
        RNOtpVerify.addListener((message) => {
          otpHandler(message);
        });
      })
      .catch((p) => console.log(p));
  };

  /**
   * Handle the received SMS with hash. Restarts listener for any subsequent messages the user might request.
   * @param message Full SMS message
   */
  const otpHandler = (message: string) => {
    if (message && !message.includes('Error')) {
      console.log('otpHandler', message);
      console.log('set pin to:', extractOTP(message));
      setCode(extractOTP(message));
    }
    RNOtpVerify.removeListener();
    startListeningForOtp();
  };

  /**
   * Extract code from your SMS message.
   * @param message Full SMS message
   */
  const extractOTP = (message: string) => {
    if (props.extractOTP) {
      return props.extractOTP(message);
    }
    return /(\d{4})/g.exec(message)[1];
  };

  /**
   * Start listening for OTP on first render. Remove listener when component is destroyed.
   */
  useEffect(() => {
    getHash();
    startListeningForOtp();
    return RNOtpVerify.removeListener();
  }, []);

  const DefaultMask = <View style={styles.mask} />;

  return (
    <SmoothPinCodeInput
      value={code}
      onTextChange={(code: string) => setCode(code)}
      onFulfill={(code: string) => props.onFulfill(code)}
      cellStyle={styles.cell}
      autoFocus={true}
      cellStyleFocused={null}
      cellSize={50}
      codeLength={4}
      cellSpacing={5}
      keyboardType={'number-pad'}
      maskDelay={500}
      password={true}
      mask={DefaultMask}
      textStyle={styles.text}
      {...props.pinInputProps}
    />
  );
};

const styles = StyleSheet.create({
  cell: {},
  text: {},
  mask: {},
});

export default SmsVerificationInput;

---

您可以尝试删除整个node_modules文件夹，并删除package-lock.json文件。然后再次运行npm安装

如果删除节点_模块和package-lock.json无效。您可以尝试显式地将

react native otp verify

依赖项添加到项目SMSTest的package.json文件中

您还可以尝试向项目package.json文件的scripts部分添加

“preinstall”：“npm install react native otp verify”

---

查看了解更多信息。

谢谢您的建议。现在，我将添加react native top verify。其他的行动似乎没有任何作用。它完成了任务：）我接受它。谢谢你的发帖。

  "name": "",
  "version": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react-native": "^0.63.34",
    "react": "16.13.1",
    "react-native": "^0.63.3",
    "react-native-otp-verify": "^1.0.3",
    "react-native-smooth-pincode-input": "^1.0.9",
    "react-native-sms-retriever": "^1.1.1"
  }
}