我如何通知应用程序重新加载应用程序以显示另一个屏幕

Question

我在登录屏幕我按下了登录按钮，所以

那个按钮有这个动作

store.dispatch({
type: 'login',
payload: {
name: email.value
},
})

在减速器上更改值

export default function (state, action) {
switch (action.type) {
case 'login':
return {
...state,
user: action.payload,
isLogged:true
}
default:
return newState
}
}

现在我必须通知App.js新的更改，因为这取决于显示堆栈屏幕

export default function App() {
return (
<Provider store={store} theme={theme}>
<Tabs store={store} />
</Provider>
)
}

我如何通知应用程序重新加载应用程序以显示另一个屏幕？

但我的组件从未更新过，我试图使用useEffect而不是更新我的组件

function Tabs ({ user })  {  
const {
data: { isLogged },
} = useSelector((state) => state)

useEffect(() => {
console.log(1234546)
}, [isLogged, user])
return (
<Stack.Navigator >
{ !store.getState().data.isLogged ?
<Stack.Screen
name="loginScreen1"
component={HomeScreen}
options={{ headerShown: false }}
/> :
<Stack.Screen
name="main"
component={MyTabs}
options={{ headerShown: false }}
/>}
</Stack.Navigator>
)

Answer 1

使用States或Redux时，我们不必告诉应用程序何时重新呈现JSX代码

每当redux或状态发生变化时，它将自动重新渲染。

但是，我们必须确保我们不会在状态或redux中更改数据，我们总是必须为状态或redox分配一个新对象。

你可以在你的代码中尝试以下更改，

function Tabs ({ user })  {  
const { isLogged } = useSelector((state) => state?.data)
return (
<Stack.Navigator >
{
isLogged
?
<Stack.Screen
name="loginScreen1"
component={HomeScreen}
options={{ headerShown: false }}
/>
:
<Stack.Screen
name="main"
component={MyTabs}
options={{ headerShown: false }}
/>
}
</Stack.Navigator>
)
}

Answer 2

应用程序导航器需要订阅isLogged状态，然后相应地重新发布。

import { useEffect } from "react";
import { useSelector } from "react-redux";
const App = () => {
const isLogged = useSelector((state) => state.isLogged);
// Track authentication state
useEffect(() => {}, [isLogged]);
return (
<Stack.Navigator>
{!isLogged ? (
<Stack.Screen
name="loginScreen1"
component={HomeScreen}
options={{ headerShown: false }}
/>
) : (
<Stack.Screen
name="main"
component={MyTabs}
options={{ headerShown: false }}
/>
)}
</Stack.Navigator>
);
};