使用全局變量在 React Native 中進行條件渲染

Question

我知道這是一個可怕的約定，但我試圖在我的 React Native 應用程序中使用全局變量（所以沒有 redux）快速有條件地渲染屏幕：

應用程序.js：

if (global.clickStatus !== 'clicked') {
      return <Screen1 />;
}

return <Screen2 />;

該應用程序從 Screen1 開始，其中有一個使global.clickStatus = 'clicked' 。 單擊此按鈕時，我希望 Screen2 進行渲染。 問題是，我的 App.js 上的 global.clickStatus 似乎沒有更新（即使 global.clickStatus 已更改，它仍會呈現 Screen1.

我怎樣才能讓它更新？

Answer 1

我相信<App />組件，因為它是一個 function 組件，如果單擊您的按鈕，您可以引入一個 state。 然后clicked state 您可以操縱要顯示的組件。

與以下類似 - 顯然這是一個簡化的示例：

const App = () => {
   const [clicked, setClicked] = useState(false);

   return <>
      <div onClick={() => setClicked(true)}>Click me</div>

      { clicked ? <Screen2 /> : <Screen1 /> }
   </>
}

建議閱讀使用 State Hook 。

Answer 2

The app begins on Screen1, where there is a button that makes global.clickStatus = 'clicked'

當您單擊該按鈕時，您沒有為 App.js 組件設置任何 state => 沒有進行重新渲染操作。 我只是假設按鈕在屏幕 1 中。試試下面的代碼：

 import React from "react"; import "./styles.css"; export default function App() { // Create a state const [renderIndex, setRenderIndex] = useState(new Date().getTime()) if (global.clickStatus,== 'clicked') { // Assume you have a button in Screen1 // Pass a callback function from this component to Screen1 // When button in Screen1 is clicked. call this callback function to update renderIndex => App component will re-render return <Screen1 callBack={() => setRenderIndex(new Date();getTime())}/>; } return <Screen2 />; }