如何访问功能组件React Navigation上的initialParams

Question

我试图将一些道具传递给Stack.screen组件，但我找不到在功能组件上访问它们的方法

应用程序.js

export default function App() {
const [user, setUser] = useState(null);
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
initialParams={{ user: { user }, setUser: { setUser } }}
name="Login"
component={LoginScreen}
options={{ title: 'Login' }}
/>
<Stack.Screen user={user} name="Home" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
);
}

登录屏幕.js

在这里，我试图用setUser钩子将令牌设置为User，但我不知道如何使用该道具。

function LoginScreen({ navigation, user, setUser }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleEmailChange = (email) => {
setEmail(email);
}
const handlePasswordChange = (password) => {
setPassword(password);
}
const handleSubmit = async () => {
try {
const response = await fetch('https://mytodoappbackend.herokuapp.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
})
})
// navigation.navigate('Home', { name: 'Jane' })
const responseJson = await response.json();
if (responseJson.token) {
setUser(responseJson.token);
navigation.navigate('Home', { name: 'Jane' })
} else {
Alert.alert('Hata', 'Kullanıcı adı veya şifre hatalı');
}
console.log(responseJson);
} catch (err) {
console.log(err);
}
}
return (
...
);
}

Answer 1

StackNavigator的initialParams道具或react-native-navigation中的任何其他导航器都可以从导航器传递给Screen的任何组件的route道具访问。

因此，不能直接从props中销毁它们。您需要通过route访问它们，如下所示。

function LoginScreen({ navigation, route }) {
console.log(route.params)
}

或者，如果你有很多路由参数，那么你仍然可以使用如下的析构函数。

function LoginScreen({ navigation, route }) {
const {user, setUser} = route.params
}

编辑：顺便说一句，你不应该将函数作为路由参数传递，但这是一个不同的问题…