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 对象。这也使您可以访问 navigation 中的 Functional Component 对象。您可以查看他们的documentation。

withNavigation 是一个 Higher Order Component (hoc)，它通过 navigation 授予 props 对象访问权限。因此，如果您使用 withNavigation 包装组件，则可以通过 props 访问它。 Official documentation。

在您的 navFunction 中，您可以使用类似的内容。

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

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

1 个答案: