如何使用FlatList从一个屏幕导航到另一个屏幕

Question

我对整个编码工作都是新手，现在我终于遇到了第一个无法解决的与代码相关的迷思！我的问题是，我根本找不到一种方法来使用FlatList，使我有可能导航到另一个屏幕！(我正在使用Stack screen，我的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对象的钩子。这也使您可以访问Functional Component中的navigation对象。你可以查看他们的documentation。

withNavigation是一个Higher Order Component (hoc)，它通过props提供对navigation对象的访问。所以如果你用withNavigation包装你的组件，你可以通过props访问它。Official documentation。

在你的navFunction中，你可以使用类似这样的东西。

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