我现在正在使用React本机导航5，并且在“主页组件中，我有一个setParams可以正常工作，但出现错误:“带有有效载荷{“params”:{“company”:“Marciello Resto 2”的 Action 'SET_PARAMS' }}未由任何导航器处理。”
我在使用Android模拟器。
谢谢大家的帮助!!!
//App.js
import * as React from "react"
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer'
import EtiquettesPictureContext from './Components/Contexts/EtiquettesPictureContext'
import RootStack from './Navigation/Navigation'
import Home from './Components/Layouts/Home'
import Etiquettes from './Components/Layouts/Etiquettes'
import TemperaturesFridges from './Components/Layouts/TemperaturesFridges'
import BonsLivraisons from './Components/Layouts/BonsLivraisons'
import EtiquettesTakePicture from "./Components/EtiquettesTakePicture"
import BonsLivraisonsTakePicture from "./Components/BonsLivraisonsTakePicture"
import DlcAlertTakePicture from "./Components/DlcAlertTakePicture"
import Notifications from "./Components/Layouts/Notifications"
import Settings from "./Components/Layouts/Settings"
import Welcome from "./Components/Layouts/Welcome"
import Login from "./Components/Layouts/Login"
import Signup from "./Components/Layouts/Signup"
import InitLogin from "./Components/Layouts/InitLogin"
import MesEtiquettes from "./Components/Layouts/MesEtiquettes"
import WhatRole from "./Components/WhatRole"
const AuthContext = React.createContext()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
export default function App({ navigation }) {
const [etiquettesPictureData, blPictureData, setEtiquettesPictureData, setBlPictureData] = React.useState("")
updateInitialData = (data) => {
setEtiquettesPictureData(data)
}
updateBlData = (data) => {
blPictureData(data)
}
const [state, dispatch] = React.useReducer(
(prevState, action) => {
switch (action.type) {
case 'RESTORE_TOKEN':
return {
...prevState,
userToken: action.isLogged,
isLoading: false,
};
case 'SIGN_IN':
return {
...prevState,
isSignout: false,
userToken: action.isLogged,
};
case 'SIGN_OUT':
return {
...prevState,
isSignout: true,
userToken: null,
};
}
},
{
isLoading: true,
isSignout: false,
userToken: null,
}
);
React.useEffect(() => {
// Fetch the token from storage then navigate to our appropriate place
const bootstrapAsync = async () => {
let isLogged;
try {
isLogged = await InitLogin.initLogin()
} catch (e) {
// Restoring token failed
}
// After restoring token, we may need to validate it in production apps
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
dispatch({ type: 'RESTORE_TOKEN', isLogged: isLogged.logged });
};
bootstrapAsync();
}, []);
const authContext = React.useMemo(
() => ({
signIn: async data => {
// In a production app, we need to send some data (usually username, password) to server and get a token
// We will also need to handle errors if sign in failed
// After getting token, we need to persist the token using AsyncStorage
// In the example, we'll use a dummy token
dispatch({ type: 'SIGN_IN', isLogged: 'dummy-auth-token' });
},
signOut: () => dispatch({ type: 'SIGN_OUT' }),
signUp: async data => {
// In a production app, we need to send user data to server and get a token
// We will also need to handle errors if sign up failed
// After getting token, we need to persist the token using `AsyncStorage`
// In the example, we'll use a dummy token
dispatch({ type: 'SIGN_IN', isLogged: 'dummy-auth-token' });
},
}),
[]
)
if (state.isLoading) {
// We haven't finished checking for the token yet
return (
<View style={[styles.container, styles.horizontal]}>
)
}
function RootStackScreen() {
return (
<Stack.Navigator>
{state.userToken == false ? (
<>
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
</>
) : (
<>
<Stack.Screen name="Home" component={Home} options={({ route }) => ({ title: route.params ? route.params.company : "" })} />
<Stack.Screen name="Etiquettes" component={Etiquettes} />
<Stack.Screen name="TemperaturesFridges" component={TemperaturesFridges} />
</>
)}
</Stack.Navigator>
)
}
function DrawerScreen() {
return (
<Drawer.Navigator>
<Drawer.Screen name="TemperaturesFridges" component={TemperaturesFridges} />
</Drawer.Navigator>
)
}
return (
<EtiquettesPictureContext.Provider
value={{
etiquette: etiquettesPictureData,
Bl: blPictureData,
updateInitialData: updateInitialData,
updateBlData: updateBlData
}}>
<AuthContext.Provider value={authContext}>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={RootStackScreen} />
</Drawer.Navigator>
</AuthContext.Provider>
</EtiquettesPictureContext.Provider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})
//Home.jsimport * as React from 'react';
import mainStyleSheet from "../../Themes/main.js"
import { MaterialHeaderButtons, Item} from '../HeaderButtons';
import Ionicons from 'react-native-vector-icons/FontAwesome5';
import Company from '../Entities/Company';
import Notification from '../Entities/Notification'
import {
SafeAreaView,
ScrollView,
View,
Text,
TouchableHighlight
} from 'react-native';
export default function Home({ navigation}) {
React.useEffect(() => {
Company.getCompany().then(company => {
navigation.setParams({ company })
})
this.didBlurSubscription = navigation.addListener(
'didFocus',
() => {
Notification.countNotifications()
.then(resp => {
navigation.setParams({ notificationsCount: resp.length })
})
}
)
// returned function will be called on component unmount
return () => {
this.didBlurSubscription()
}
}, [])
const { navigate} = navigation;
return (
<TouchableHighlight style={[mainStyleSheet.buttonHomeContainer, { marginTop: 0 }]} onPress={() => navigate('Etiquettes')} >
<Ionicons name="tag" style={{ marginLeft: 20 }} color="white" size={30} />
Etiquettes produits
<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('TemperaturesFridges')}>
<Ionicons name="thermometer-quarter" style={{ marginLeft: 20 }} color="white" size={30} />
Relevés de température
<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('BonsLivraisons')}>
<Ionicons name="file-invoice" style={{ marginLeft: 20 }} color="white" size={30} />
Bons de livraisons
<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('DownloadableDocuments')}>
<Ionicons name="file-image" style={{ marginLeft: 20 }} color="white" size={30} />
Documents à télécharger
)
}
谢谢你们!!!
最佳答案
我相信这个问题与在卸载组件时调用navigation.setParams有关。根据反应导航文档[0]，
如果在调用setParams时当前屏幕已在卸载，则导航器将无法处理它。重做您的逻辑，这样就不会在模糊上设置参数。
[0] https://reactnavigation.org/docs/navigation-prop/#setparams
关于javascript - 在家里，我得到那个错误: The action 'SET_PARAMS' with the payload {“params” : {“company” :“Marciello Resto 2” }} was not handled by any navigator，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61371946/