react-native - 使用部分列表和平面列表反应原生条件渲染

Question

我有两个不同的组件CategoryList，一个是平面列表，regionlist一个是部分列表。我想显示第CategoryList一个，当单击项目时，区域列表将显示，但是我不确定它为什么不起作用。（我使用上下文来存储状态）

{!isToggle ? (
    <CategoryList></CategoryList>
  ) : (
    <RegionList style={styles.regionListStyle}></RegionList>
  )}

我还创建了一个按钮来查看它是否是关于上下文的问题，但事实并非如此。

const ToggleContext = createContext(true);

export const useToggle = () => {
return useContext(ToggleContext);
};

export function ToggleProvideData({children}) {
const [isToggle, setToggle] = useState(true)

return <ToggleContext.Provider value={{isToggle,setToggle}}>
        {children}
        </ToggleContext.Provider>;
}

我只是想知道条件渲染是否不适用于平面列表？

更新：我尝试创建一个状态来存储 useContextisToggle但它只出现 1 秒

标签： react-native

Answer 1

我猜 isToggle 作为一个布尔变量，因此您可以使用下面的代码进行有条件的渲染

{ (isToggle === true) &&
    <CategoryList></CategoryList>
}

{ (isToggle === false) &&
    <RegionList style={styles.regionListStyle}></RegionList>
}