FlatList onPress 重定向到错误页面

Question

我有 3 个屏幕。第一个屏幕包含 FlatList：

const navigation = useNavigation()

    function whereTo(id) {

        console.log(id)

        switch(id) {

            case 1: 
                navigation.navigate('Malko')

            case 2:
                navigation.navigate('TRY2')
        }
    }

    const renderItem = ({ item }) => {

        return (
            <TouchableOpacity onPress={() => whereTo(item.id)}>

                <CalculatorCard text={item.text} image={item.imageurl} border={item.bordercolor} />

            </TouchableOpacity>
        )
    }

    return (

        <View style={styles.container}>

            <FlatList

                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />

        </View>
    )

CalculatorCard 只是一个简单的信息卡组件。 FlatList 的数据：

const DATA = [

    {
        id: 1,
        text: "EXAMPLE 1",
        imageurl: "https://maisgeek.com/wp-content/uploads/2020/10/shutterstock_1006988770.png",
        bordercolor: "rgb(0, 100, 180)"
    },
    {
        id: 2,
        text: "EXAMPLE 2",
        imageurl: "https://images.ctfassets.net/lzny33ho1g45/T5qqQQVznbZaNyxmHybDT/b76e0ff25a495e00647fa9fa6193a3c2/best-url-shorteners-00-hero.png?w=1520&fm=jpg&q=30&fit=thumb&h=760",
        bordercolor: "rgb(0, 180, 255)"
    },
    {
        id: 3,
        text: "EXAMPLE 3",
        imageurl: "https://neilpatel.com/wp-content/uploads/2019/05/imagem-de-tela-de-uma-url.jpeg",
        bordercolor: "rgb(0, 160, 140)"
    },
]

Malko 和 TRY2 屏幕都是只有文本组件的空屏幕。问题是，当我单击第一个 CalculatorCard 时，传递给 whereTo() 的 id 是 1，但是我被重定向到 TRY2 而不是 Malko。

Answer 1

您需要添加 break 以防万一；

 switch(id) {

        case 1: 
            navigation.navigate('Malko');
            break;

        case 2:
            navigation.navigate('TRY2');
            break;
    }

FlatList onPress 重定向到错误页面

FlatList onPress redirecting to wrong page

android

react-native