FlatList onPress должен перейти на новую страницу (детали выбранного элемента)

Question

Я хотел бы написать код, когда Flatlist onPress должен перейти на новую страницу и открыть детали содержимого. Может кто-нибудь помочь мне в написании кода для навигации и открыть его на странице EventContent

Я написал немного кода для перехода на новую страницу при нажатии. Но я не могу найти правильное решение и открыть контент на новой странице под названием EventContent page. Я новичок, чтобы реагировать нативно, может кто-нибудь помочь мне в получении решения.

App.js

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

EventCard, где я добавил мой, чтобы перейти на новую страницу. Я не могу написать правильный код для перехода на следующую страницу и подробного открытия содержимого.

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')}>

Надеюсь, это поможет. Удачного кодирования!