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

你不能返回一个像 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

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

2 个答案: