如何使用 FlatList 從一個屏幕導航到另一個屏幕

Question

我對這整個編碼的東西很陌生，現在我終於到達了我的第一個無法解決的與代碼相關的神話，我的問題是我根本找不到一種方法來使用 FlatList 以使我可以導航到另一個屏幕：（我正在使用堆棧屏幕，我的 8 項長 FlatList 中的每個項目都鏈接到另一個屏幕，或者至少我嘗試到達那里）這是包含 FlatList 的屏幕代碼：

import React, { Component } from 'react';
import {
    FlatList,
    StyleSheet, Text,
    View
} from 'react-native';
import 'react-native-gesture-handler';
import { Card } from 'react-native-paper';
import { withNavigation } from 'react-navigation';
//export default

class listTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            helpersList: [
                { ID: 1, title: '💭 Memories' },
                { ID: 2, title: '🐱 Cute Cats' },
                { ID: 3, title: '🎥 Funny Vids' },
                { ID: 4, title: '🌱 Vegan Recipes' },
                { ID: 5, title: '🤣 Random Jokes' },
                { ID: 6, title: '🧠 Random Knowledge' },
                { ID: 7, title: '🚰 Hydration' },
                { ID: 8, title: '🤪 Memes' },
            ]
        };
    }

    navFunction = (item) => {
        //const navigation = useNavigation();

        if (item.ID === 1) {
            navigation.navigate('💭 Nice Memories')
            //alert('Whats Up Slappers')
        }
        else if (item.ID === 2) {
            navigation.navigate('🐱 Cute Cats')
            //alert('Whats Up Slappers 2')
        }
        else if (item.ID === 3) {
            navigation.navigate('🎥 Funny Vids')
        }
        else if (item.ID === 4) {
            navigation.navigate('🌱 Vegan Recipes')
        }
        else if (item.ID === 5) {
            navigation.navigate('🤣 Random Jokes')
        }
        else if (item.ID === 6) {
            navigation.navigate('🧠 Random Knowledge')
        }
        else if (item.ID === 7) {
            navigation.navigate('🚰 Hydration')
        }
        else if (item.ID === 8) {
            navigation.navigate('🤪 Memes')
        }
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.helpersList}
                    renderItem={({ item }) =>
                        <Card style={styles.card} onPress={() => this.navFunction(item)}>
                            <View>
                                <Text style={styles.cardText}>
                                    {item.title}
                                </Text>
                            </View>
                        </Card>
                    }
                    keyExtractor={item => item.ID}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    card: {
        borderRadius: 10,
        backgroundColor: '#146b3a',
        paddingHorizontal: 15,
        paddingVertical: 40,
        marginVertical: 5,
        marginHorizontal: 16,
        shadowColor: "black",
        shadowOffset: { width: 0, height: 0, },
        shadowOpacity: 1,
        shadowRadius: 5,
    },
    cardText: {
        color: "white",
        fontSize: 20,
    }
})

export default withNavigation(listTest);

現在我得到的主要問題是，找不到變量“導航”。 我嘗試了多種導航方法，但我無法讓一個工作。 現在我在導出時遇到了“withNavigation”，但它似乎也不對！

感謝您的時間和幫助！

Answer 1

useNavigation是一個掛鈎，可讓您訪問navigation object。 這使您還可以訪問Functional Component中的navigation object。 你可以查看他們的文檔。

withNavigation是一個Higher Order Component (hoc) ，它通過props提供navigation object 訪問。 所以如果你用withNavigation包裝你的組件，你可以通過props訪問它。 官方文檔。

在您的navFunction中，您可以使用類似的東西。

const { navigation } = this.props;
navigation.navigate('💭 Nice Memories')
.
.
navigation.navigate('🐱 Cute Cats')