FlatList onPress 应该导航到新页面（单击项目的详细信息）

Question

我想在 Flatlist onPress 导航到新页面并打开内容详细信息时编写代码。谁能帮我编写导航代码并在 EventContent 页面中打开它

我已经编写了一些代码来在按下时导航到新页面。但我无法找到正确的解决方案并在名为 EventContent 页面的新页面中打开内容。我是本机反应的新手，任何人都可以帮助我获得解决方案。

App.js

detail:{
 screen: EventContent,
 navigationOptions:()=>({
   title:'',
 })
},

我在其中添加了我的事件卡以导航新页面。我无法编写正确的代码来导航下一页并详细打开内容。

const styles = StyleSheet.create({
    card: {
        backgroundColor:'#fff',
        flex: 1,
        padding:10,
        paddingTop:10,
        paddingBottom:10,
        margin:10,
        marginTop:10,
        marginBottom:5,
        borderColor:'#000'

    },
    cardHeader:{
        flex:1,
        flexDirection:'row'
    },
    date:{
        fontWeight:'200',
        fontSize:15,
        color:'#bdbdbd',
        width:'30%',
        textAlign:'left',
    },
    title:{
        fontSize:20,
        fontWeight:'200',
        marginLeft:7,
        textAlign:'left',
    },
    counterContainer:{
        flex:1,
        flexDirection:'row',
        justifyContent:'space-between',
        paddingLeft:'5%',
        paddingRight:'5%',
    },
    counter:{
        width:'25%',
        flex:1,
    },
    counterText:{
        fontSize:15,
        textAlign:'justify',
        color:"#A8A4A4",
    },
    counterLabel:{
        fontSize:13,
        fontWeight:'100',
        color:'#a3a3a3',
        textAlign:'justify',
        paddingTop:0,
    },
});

export default function EventCard({ events }) {

    var currentDate = moment().format("DD/MM/YYYY");

    return (
        <TouchableOpacity onPress={() => this.props.navigation.navigate('detail')}>,
        <View style={styles.card}>
        <View style={styles.cardHeader}>
                <Text style={styles.date}>{(currentDate)}
                </Text>
                <Text style={styles.title}> {events.name}</Text>
            </View>
            <View style={styles.counterContainer}>
                <View style={styles.counter}>
                    <Text style={styles.counterText}>{events.content}</Text>

                </View>
            </View>
        </View>

        </TouchableOpacity>

    );
}

EventCard.propTypes = {
    event: PropTypes.shape({
        title: PropTypes.string.isRequired,
        date: PropTypes.instanceOf(Date)
    }),
};

EventList where my FlatList Content is returned. Can anyone direct me whether I am going in the right path or have to change any content in the code.


 class EventList extends Component {
  state = {
    events: [],
  }
 componentDidMount() {

     //getEvents().then(events => this.setState({ events }));

    const events = require('./db.json').events;
    this.setState({ events });

  }
render() {
    return [

      <FlatList
        key="flatlist"
        style={styles.list}
        data={this.state.events}
        renderItem={({ item, seperators }) => (<EventCard events={item} />)}
        keyExtractor={(item, index) => index.toString()}

      />,

EventContent 在这个页面中我需要编写代码来详细打开内容并能够编辑内容。

import React,{ Component } from 'react';
import {AppRegistry,
Text,
View,
} from 'react-native';
import EventCard from './EventCard';
import EventList from './EventList';

const { navigation } = this.props;
const itemId = navigation.getParam(' ', ' ');


return (
    <View 
       style={{ 
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center' 
        }}>
        <Text>Details Screen</Text>
    </View>
);

onPress 应导航到 EventContent 页面并详细打开内容以编辑或查看内容时。

Answer 1

您的EventCard 应该可以访问navigation 属性，以便导航到导航器中的特定路线。从代码看来，您的方向似乎是正确的，只是您的 EventCard 无法访问 navigation 道具。为此，请将其作为道具传递，如下所示。

renderItem={({ item, seperators }) => (<EventCard navigation={this.props.navigation} events={item} />)}

然后您应该从提供给EventCard 的道具访问导航，如下所示：

 <TouchableOpacity onPress={() => navigation.navigate('detail')}>