我试图在React Native中使用构建一个身份验证系统
- 反应导航
- 异步存储
- redux
这是我的系统流程：我只想在(isAuthenticated==false)时显示Sign屏幕，当它为true时，我想显示UserUI屏幕
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown:false
}}
>
{isAuthenticated == false ? (
<>
<Stack.Screen name="Sign" component={Sign} />
</>
) : (
<>
<Stack.Screen name="UserUI" component={Tabs} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
</Provider>(isAuthenticated)也依赖于这个函数：
React.useEffect(()=>{
const showStorage = async () => {
try {
const userObj = await AsyncStorage.getItem('currentStoredUserState')
if(userObj != null){
let jsonObject = JSON.parse(userObj)
setIsAuthenticated(jsonObject.state)
}else{
setIsAuthenticated(false)
}
keys()
}catch(err){
console.log(err)
}
}
showStorage()
},[itemsLength])但问题是，当用户进行身份验证时(isAuthenticated)不会变为true，我必须手动刷新应用程序(在AsyncStorage不为空之后)才能访问"UserUI"屏幕。
正如你所看到的，我将(itemsLength)设置为dependency，但它不起作用：
const [itemsLength,setItemLength] = useState(0)
const keys = async () => {
let key = await AsyncStorage.getAllKeys()
setItemLength(key.length)
}以上所有内容都在App.js中
登录操作：
const setAuthStorage = async (data) => {
try {
let authState = { state: true,currentStoredUser_ : data }
await AsyncStorage.setItem('currentStoredUserState', JSON.stringify(authState))
} catch (err) {
console.log(err)
}
}
export const sign_in = (userSignData) => (dispatch) => {
auth.signInWithEmailAndPassword(userSignData.email, userSignData.password)
.then(userCredential => {
const user = userCredential.user
db.collection('users').doc(auth.currentUser.uid.toString()).get()
.then(doc => {
if (doc.exists) {
setAuthStorage(doc.data())
dispatch({
type: SIGN_IN,
payload: {
authenticated: true,
currentUser: user,
}
})
}
})
}).catch(err => {
console.log(err)
})
}在签名屏幕中签名Hanlder：
const signHandler = () => {
if (isSignedUp) {
dispatch(sign_in(userSignData))
} else {
dispatch(sign_up(userSignData))
}
}已解决，但不是很完美，–
谢谢你们的帮助，我真的很感激，你们让我使用redux状态更改渲染条件，但我无法访问外部的状态，为了这个任务，我必须订阅以在App.js组件中存储更改，当我们说订阅==听每一个状态更改时，这对应用程序性能不好：
store.subscribe(()=>{
/*
I combined two states: rootReducer (for user details) and postReducer(for posts changes)
*/
// making sure it's rootReducer state
if(store.getState().hasOwnProperty('rootReducer')){
//when user sign in or sign up rootReducer.authenticated will change from false to true
if(store.getState().rootReducer.authenticated == true){
// change the rendering condition
setIsAuthenticated(true)
}else{
setIsAuthenticated(false)
}
}
})我还对内部操作进行了一些更改，以仅在存储数据后更改状态
const setAuthStorage = async (data) => {
try {
let authState = { state: true,currentStoredUser_ : data }
// to provide promise chaining this function will store & return a promise
return await AsyncStorage.setItem('currentStoredUserState', JSON.stringify(authState))
} catch (err) {
console.log(err)
}
}
export const sign_in = (userSignData) => (dispatch) => {
auth.signInWithEmailAndPassword(userSignData.email, userSignData.password)
.then(userCredential => {
const user = userCredential.user
db.collection('users').doc(auth.currentUser.uid.toString()).get()
.then(doc => {
if (doc.exists) {
setAuthStorage(doc.data())
.then(()=>{
dispatch({
type: SIGN_IN,
payload: {
authenticated: true,
currentUser: user,
}
})
})
}
})
}).catch(err => {
console.log(err)
})
}如果找到了更好的解决方案，我会和你们分享
根据我的理解，你试图实现的是，
- 未登录时使用登录屏幕，登录时使用用户屏幕
- 用户登录后，保存数据并保持用户登录
它如何与您所拥有的最相似：
- 将用户数据存储在redux中。(我想你已经做了。)
- 使用该redux状态来选择可用的屏幕集(您使用了异步存储，更新时不会重新渲染)
- 将用户数据持久化为redux。可以使用redux-persistent。(为下次用户打开应用程序时保存用户信息)
编辑添加代码以使有问题的解决方案更好地
App.js文件
import AppNavigation from './AppNavigation'
...
<Provider store={store}>
<AppNavigation/>
</Provider>
AppNavigation.js
import {useSelector} from 'react-redux'
...
const AppNavigation =()=>{
const isAuthenticated = useSelector(state=>state.authenticated===true);
return(
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown:false
}}
>
{isAuthenticated == false ? (
<>
<Stack.Screen name="Sign" component={Sign} />
</>
) : (
<>
<Stack.Screen name="UserUI" component={Tabs} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
)
}
您应该在redux状态下显示有条件的路由，然后它会在登录时自动更改路由。