如何訪問功能組件 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 掛鈎將令牌設置為用戶，但我不知道如何使用該道具。

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中的任何其他導航器，可以從導航器傳遞給任何組件的route道具訪問Screen 。

因此，你不能直接從props中解構它們。 您需要通過以下route訪問它們。

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

或者，如果你有很多路由參數，那么你仍然可以按如下方式使用解構。

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

編輯：順便說一句，你不應該將函數作為路由參數傳遞，但這是一個不同的問題......