反应本机不变违规：无效的挂钩调用

Question

我正在尝试使用 react-native-toast-banner 中的这个模块，你在下面看到的代码在当天早些时候运行得很好，但不知何故它不再起作用了，我这辈子都不能'不知道我做了什么破坏了它。

import {
  ToastBannerProvider,
  ToastBannerPresenter,
  useToastBannerToggler /* or withToastBannerToggler */,
  Transition,
} from "react-native-toast-banner";


const Notibanner = (type, message) => {
  
const { showBanner, hideBanner } = useToastBannerToggler();
return  showBanner({
    contentView: (
      <View
        style={{
          alignItems: "center",
          backgroundColor:
            type === "success"
              ? "green"
              : type === "warning"
              ? "orange"
              : type === "danger"
              ? "red"
              : "lightblue",
          margin: 20,
          padding: 5,
          borderRadius: 5,
          flexDirection: "row",
        }}
      >
        <Image
          style={{
            marginHorizontal: 5,
            width: 30,
            height: 30,
          }}
          source={
            type === "success"
              ? require("./../../images/success.png")
              : type === "warning"
              ? require("./../../images/warning.png")
              : type === "danger"
              ? require("./../../images/danger.png")
              : require("./../../images/info.png")
          }
        />
        <Text
          style={{
            color: "white",
            fontSize: 16,
            fontWeight: "bold",
            marginHorizontal: 20,
          }}
        >
          {message}
        </Text>
      </View>
    ),
    duration: 3000 /* default: 3000 */,
    transitions: [Transition.Move],
    disableHideOnPress: false,
  });
};

我通过以下方式调用该函数：

        <Button
          containerStyle={{ alignItems: "center" }}
          buttonStyle={styles.submitButton}
          loading={auth.loggingIn}
          onPress={() => {
            oldpassword === "" || password === "" || confirmpassword === ""
            ? Notibanner("warning", "complete all fields!")
            : password !== confirmpassword 
            ? Notibanner("warning", "password not matching")
            : sendData();
          }}
          title="update"
        />

我什至尝试回到原来的示例代码，但我得到了同样的错误：

违反不变性：无效挂钩调用

完整的错误日志在此图片中可见： https://imgur.com/f5fJvM3

Answer 1

你不能return像showBanner

这样的钩子

将代码移动到 Button 所在的位置，然后删除 Notibanner 函数中的 return。

import {
  ToastBannerProvider,
  ToastBannerPresenter,
  useToastBannerToggler /* or withToastBannerToggler */,
  Transition,
} from "react-native-toast-banner";

const { showBanner, hideBanner } = useToastBannerToggler();

const Notibanner = (type, message) => {
   showBanner({
    contentView: (
      <View
        style={{
          alignItems: "center",
          backgroundColor:
            type === "success"
              ? "green"
              : type === "warning"
              ? "orange"
              : type === "danger"
              ? "red"
              : "lightblue",
          margin: 20,
          padding: 5,
          borderRadius: 5,
          flexDirection: "row",
        }}
      >
        <Image
          style={{
            marginHorizontal: 5,
            width: 30,
            height: 30,
          }}
          source={
            type === "success"
              ? require("./../../images/success.png")
              : type === "warning"
              ? require("./../../images/warning.png")
              : type === "danger"
              ? require("./../../images/danger.png")
              : require("./../../images/info.png")
          }
        />
        <Text
          style={{
            color: "white",
            fontSize: 16,
            fontWeight: "bold",
            marginHorizontal: 20,
          }}
        >
          {message}
        </Text>
      </View>
    ),
    duration: 3000 /* default: 3000 */,
    transitions: [Transition.Move],
    disableHideOnPress: false,
  });

};

Answer 2

您可以将其设为自定义挂钩 https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook

反应本机不变违规：无效的挂钩调用

react native Invariant Violation: Invalid hook call

hook

react-native