在 2 个不同的文件中反应本机 Hooks 同步 UseState

Question

我想通过 useHook 同步 2 个不同文件中 useState 的值

我有一个名为 useChangeScreen 的文件当我想显示不同的视图时，我用它来设置：

    export const useChangeScreen = () => {
    ...
      const [homeActivo, setHomeActivo] = useState(false);
      const [searchActivo, setSearchActivo] = useState(true);
      const [profileActivo, setProfileActivo] = useState(false);
    ...
      const irAHome = () => {
        setHomeActivo(true);
        setSearchActivo(false);
        setProfileActivo(false);
      };
      const irASearch = () => {
        setHomeActivo(false);
        setSearchActivo(true);
        setProfileActivo(false);
      };
      const irAProfile = () => {
        setHomeActivo(false);
        setSearchActivo(false);
        setProfileActivo(true);
      };
    ...
    return  {
      homeActivo,
      searchActivo,
      profileActivo,
      irAHome,
      irASearch,
      irAProfile
    }
    }

这个钩子在导航组件中被调用：

    export const Nav = () => {
      const {
        irAHome,
        irANotifi,
        irAProfile,
        irASearch
      } = useChangeScreen();
    ...
    return (
    ...
    <TouchableOpacity onPress={irAHome}>
    ...
    <TouchableOpacity onPress={irASearch}>
    ...
    <TouchableOpacity onPress={irAProfile}>
    ...
    )
    }

在屏幕控制器中我有这个：

export const ScreenController =() => {
  const {
    homeActivo,
    searchActivo,
    profileActivo,
  } = useChangeScreen();
...
return(
...
      {homeActivo ? (
        <HomeScreen />
      ) : searchActivo ? (
        <SearchShopsScreen />
      ) : profileActivo ? null : null}
...
)
}

当我按下 nav 中的按钮时，我希望 ScreenController 中的视图从 Home 更改为 Profile 或 Search，但是当我按下按钮，状态没有改变

Answer 1

你可以提升状态到父组件并将它传递给它的子组件，使用React Context API 或 Redux.

如果选择解除状态：

那么您将拥有一个如下所示的父组件：

// ...
const Parent = () => {
  const {
    irAHome,
    irANotifi,
    irAProfile,
    irASearch,
    homeActivo,
    searchActivo,
    profileActivo
  } = useChangeScreen();

  return (
    <>
      <Nav
        irAHome={irAHome}
        irANotifi={irANotifi}
        irAProfile={irAProfile}
        irASearch={irASearch}
      />

      <ScreenController
        homeActivo={homeActivo}
        searchActivo={searchActivo}
        profileActivo={profileActivo}
      />
    </>
  );
};
// ...

然后像这样使用从 props 传递的值：

export const ScreenController =({ homeActivo, searchActivo, profileActivo }) => {
  // ...
  return (
      // ...
      {homeActivo ? (
        <HomeScreen />
      ) : searchActivo ? (
        <SearchShopsScreen />
      ) : profileActivo ? null : null}
      // ...
  );
};

和：

export const Nav = ({
  irAHome,
  irANotifi,
  irAProfile,
  irASearch
}) => {
  // ...
  return (
    // ...
    <TouchableOpacity onPress={irAHome} />
    // ...
    <TouchableOpacity onPress={irASearch} />
    // ...
    <TouchableOpacity onPress={irAProfile} />
    // ...
  )
}

注：

您实际上应该只使用一种状态来存储当前屏幕并使用比较运算符检查当前屏幕。

查看这些以获取更多详细信息：

在 2 个不同的文件中反应本机 Hooks 同步 UseState

React native Hooks sync UseState in 2 diferent files

react-native

react-hooks

use-state

如果选择解除状态：

注：