React Native Hooks 在 2 个不同的文件中同步 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} />
    // ...
  )
}

注意：

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

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

1. Lifting State Up
2. React Context API
3. Get Started with Redux