[英]Problem with React 5 Auth Screen navigation and Redux Store
我是本机反应的新手,我在身份验证屏幕导航和 Redux 商店遇到了这个问题。 因此,当我按“开始”时,它不会导航到 ClassesListScreen,而是保留在 LoginScreen 中。 虽然当我控制台登录时打印出商店中的“isLoggedIn”属性为真,但它仍然不会重新渲染。 为什么会这样? 非常感谢。
这是我的StackNavigation.js
:
import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import StudentsTabNavInit from './StudentsTabNavigation';
import LoginScreen from '../components/login/LoginScreen';
import DetailsScreen from '../components/details/DetailsScreen';
import store from '../store/store'
import AddScreen from '../components/add/AddScreen';
import ClassesListScreen from '../components/classes/ClassesListScreen';
const StackNav = createStackNavigator();
import { connect } from 'react-redux'
function StackNavInit(){
return (
<StackNav.Navigator
initialRouteName="Login"
>
{store.getState().isLoggedIn? (
<>
<StackNav.Screen
name="Classes"
component={ClassesListScreen}
options={{title: "Your Classes"}}
/>
<StackNav.Screen
name="StudentsTabNav"
component={StudentsTabNavInit}
options ={{title: "Students"}}
/>
<StackNav.Screen
name="Details"
component={DetailsScreen}
options={{ title: "Details" }}
/>
<StackNav.Screen
name="Add"
component={AddScreen}
options={{title: "Add Course"}}
/>
</>
) : (
<>
<StackNav.Screen
name="Login"
component={LoginScreen}
options={{headerShown: false}}
/>
</>
)
}
</StackNav.Navigator>
)
}
export default StackNavInit
我的LoginScreen.js
:
import React from 'react'
import { render } from 'react-dom'
import { Text, View, Button} from 'react-native'
import store from '../../store/store'
import {login} from '../../store/actions'
class LoginScreen extends React.Component{
constructor(props){
super(props)
}
logIn = ()=> {
//console.log(store.getState().isLoggedIn)
store.dispatch(login());
//this.props.navigation.navigate("Classes")
};
render(){
return (
<View>
<Text> Welcome to Courses Managing Application</Text>
<Text> Press Start </Text>
<Button title="Start" onPress={this.logIn}></Button>
<Text> {store.getState().isLoggedIn} </Text>
</View>
)
}
}
export default LoginScreen
有关更多信息,以下是我的store
文件夹中的内容(但我认为这无关):
actions.js
:
export const UPDATE_INFOR = 'UPDATE_INFOR'
export const GET_DATA = 'GET_DATA'
export const ADD_EMPLOYEE = 'ADD_EMPLOYEE'
export const DATA_REQ_SENT = 'DATA_REQ_SENT'
export const DATA_REQ_SUCCEED = 'DATA_REQ_SUCCEED'
export const DATA_REQ_FAILED = 'DATA_REQ_FAILED'
export const LOG_IN = 'LOG_IN'
export const updateInfor = (infor) => ({type: UPDATE_INFOR, payload: infor})
export const addEmployee = (infor) => ({type: ADD_EMPLOYEE, payload: infor})
export const login = () => ({type: LOG_IN})
reducers.js
:
import defaultState from './state'
function reducer(state = defaultState, action) {
switch (action.type) {
case 'LOG_IN':
return {...state, isLoggedIn: true}
default:
return state
}
}
export default reducer
state.js
:
export default defaultState = {
isLoggedIn: false,
url: 'https://randomuser.me/api/',
results: 100,
nat:'us',
list_inc:'name,gender,dob,phone,picture,id',
}
store.js
:
import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
import thunk from 'redux-thunk'
export default store = createStore(reducer, applyMiddleware(thunk))
我自己想出了一个办法。 首先用<Provider></Provider>
包装 App
export default function App() {
return (
<Provider store ={store}>
<NavigationContainer>
<StackNavInit/>
</NavigationContainer>
</Provider>
);
}
然后在 StackNav 中使用 Selector 将属性isLoggedin
连接到具有相同名称的 store 属性,例如: const isLoggedIn = useSelector(state => state.isLoggedIn)
然后导航器将如下所示:
function StackNavInit(){
const isLoggedIn = useSelector(state => state.isLoggedIn)
return (
<StackNav.Navigator
initialRouteName="Login"
>
{isLoggedIn? (
<>
<StackNav.Screen
name="Classes"
component={ClassesListScreen}
options={{title: "Your Classes"}}
/>
<StackNav.Screen
name="StudentsTabNav"
component={StudentsTabNavInit}
options ={{title: "Students"}}
/>
<StackNav.Screen
name="Details"
component={DetailsScreen}
options={{ title: "Details" }}
/>
<StackNav.Screen
name="Add"
component={AddScreen}
options={{title: "Add Course"}}
/>
</>
) : (
<>
<StackNav.Screen
name="Login"
component={LoginScreen}
options={{headerShown: false}}
/>
</>
)
}
</StackNav.Navigator>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.