在 FlatList 的屏幕之间反应原生导航

Question

我想使用 FlatList 中的数据导航到第二个屏幕，但无法实现。这是我的代码

主屏幕：

import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
var CatalogList = require("./catalogFlatList");
import { createBottomTabNavigator, SafeAreaView } from "react-navigation";

class MainScreen extends React.Component {
    render() {
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: "#ed6b21" }}>
                <CatalogList />
            </SafeAreaView>
        );
    }
}

class SecondScreen extends React.Component {
    render() {
        const { navigation } = this.props;
        const text = navigation.getParam("text", "ERROR");
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Text>
                    PASSED DATA IS!
                    {JSON.stringify(text)}
                </Text>
            </View>
        );
    }
}

export default createBottomTabNavigator({
    .. some icons and colors ..
})

以及绘制主屏幕的 CatalogList 模块

import React, { Component } from "react";
import {
    View,
    Text,
    FlatList,
    ActivityIndicator,
    StyleSheet,
    Dimensions,
    TouchableOpacity
} from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

class FlatListDemo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            data: [],
            error: null,
            refreshing: false,
            noData: false,
            tempData: []
        };
    }

    componentDidMount() {
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
      .. fetch some data from url ..
    };

    render() {
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <TouchableOpacity onPress={item.onItemPressed}>
                            <ListItem
                                title={`${item.name}`}
                                subtitle={`${item.companyname}`}
                                onPress={() => {
                                    this.props.navigation.navigate("Second", {
                                        text: `${item.name}`
                                    });
                                }}
                                containerStyle={{ borderBottomWidth: 0 }}
                            />
                        </TouchableOpacity>
                    )}
                    keyExtractor={item => item.name}
                />
            </List>
        );
    }
}

export default FlatListDemo;
module.exports = FlatListDemo;

这可以呈现 FlatList，但是在单击 ListItem 时会引发错误

undefined is not an object (evaluating 'this2.props.navigation.navigate')

无法弄清楚这背后的逻辑。我不想将所有代码都写在一个页面中。

Answer 1

您需要将导航道具传递给您的Flatlist 组件或使用withNavigator HOC 来访问导航道具

<SafeAreaView style={{ flex: 1, backgroundColor: '#ed6b21' }}>
  <CatalogList navigation={this.props.navigation} />
</SafeAreaView>

Answer 2

Try this



 <FlatList 
         data={this.state.data}
         renderItem={({ item }) => (
              <TouchableOpacity onPress={() => {this.props.navigation.navigate('Second'{text:`${item.name}`})}}>
        <ListItem 
        title={`${item.name}`}
        subtitle={`${item.companyname}`}
        containerStyle={{ borderBottomWidth: 0 }}
        />

    </TouchableOpacity>
    )}
    keyExtractor={item => item.name}
    />