时间戳

首页 > 解决方案 > React Native Hooks 在 2 个不同的文件中同步 UseState

react-native - React Native Hooks 在 2 个不同的文件中同步 UseState

问题描述

我想从 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，但是当我按下按钮时，状态不会改变

标签： react-nativereact-hooksuse-state

解决方案

您可以将状态提升到父组件并将其传递给它的子组件，使用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. 提升状态
  2. 反应上下文 API
  3. 开始使用 Redux

推荐阅读