Question

当Flatlist onPress应该导航到新页面并打开内容详细信息时，我想编写代码。谁能帮助我编写用于导航的代码，然后在EventContent页面中打开它

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

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

希望这会有所帮助。祝您编码愉快！

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

1 个答案: