传递参数给路由

Question

根据我在 https://reactnavigation.org/docs/params/ 中看到的内容，我目前正在摆弄一些练习代码您应该能够通过路线传递超过 1 个参数但我似乎做不到。我只发送了我想从 Topping.js 传递到 Rasa.js 的两个参数中的一个我可能做错了什么？感谢任何帮助

Topping.js

export default function HalTopping({route,navigation}){ 
    const { JenisMie } = route.params;
    const TipeMie = JenisMie;

        return(  
            <ScrollView>
                <Text>itemId: {JSON.stringify(JenisMie)}</Text>
                <View style={styles.container}> 
                    <View style={styles.card}> 
                        <View style={styles.card_header}> 
                            <Text style={styles.title}> Telur Dadar </Text>    
                        </View>
                        <View style={{alignItems : 'center', margin : 20}}> 
                            <Image 
                                style={{width: 300, height : 300}} 
                                source={require('./Img/Dadar.jpg')} 
                            /> 
                        </View>  
                    </View>
                        <View style={styles.card_footer}> 
                            <Button 
                                title="Pilih!" 
                                color="#dc3545"
                                onPress={() => navigation.navigate('HalPedas', {JenisTopping: "Telur Dadar"})} /> 
                        </View>  
                </View> 
            </ScrollView>             
        )  
};

Rasa.js

export default function HalPedas({route,navigation}){ 
    const { JenisMie1 } = route.params;
    const { JenisTopping } = route.params;

return( 
       <Text>itemId1: {JSON.stringify(JenisMie1)}</Text>
       <Text>itemId2: {JSON.stringify(JenisTopping)}</Text>)

App.js

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HalTopping from './Topping';
import HalPedas from './Rasa';
import HalPesanan from './Pesanan';


const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="HalTopping" component={HalTopping}/>
        <Stack.Screen name="HalPedas" component={HalPedas}/>
        <Stack.Screen name="HalPesanan" component={HalPesanan}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 1

当您导航到 'HalPedas' 时，您只传递了一个参数，'JenisTopping'。

<View style={styles.card_footer}> 
  <Button 
    title="Pilih!" 
    color="#dc3545"
    onPress={() => navigation.navigate('HalPedas', {JenisTopping: "Telur Dadar"})} 
  /> 
</View>

您可以添加一个额外的参数，如下所示

<View style={styles.card_footer}> 
  <Button 
    title="Pilih!" 
    color="#dc3545"
    onPress={() => navigation.navigate('HalPedas', {
      JenisTopping: "Telur Dadar",
      JennisMeil: "Something Else"
    })} 
  /> 
</View>

传递参数给路由

Passing parameters to routes

javascript

react-native