在显示 React 本机日历事件方面需要帮助 [英] Need help in displaying React native calendar events

问题描述

我对原生反应有点陌生，并且已经使用 JSON 有一段时间了.我想用日历事件视图显示我的 json 数据.我需要帮助将 activity_periods 数据传递给每个用户的日历.

I am a bit new to react native and been messing around with JSON for some time. I want to display my json data with a calendar event view. I need help in passing activity_periods data to the calendar for each user.

这是我的 Json 文件数据:

Here is my Json file data :

{
    "ok": true,
    "members": [{
            "id": "W012A3CDE",
            "real_name": "Egon Spengler",
            "tz": "America/Los_Angeles",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        },
        {
            "id": "W07QCRPA4",
            "real_name": "Glinda Southgood",
            "tz": "Asia/Kolkata",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        }
    ]
}

使用 flatlist 显示用户数据的代码:

code to display Userdata using flatlist:

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import {Card} from 'react-native-paper'
import data from '../data/db.json';

export default class UsersScreen extends Component {

    render()
    {
        return(
            <View style={styles.container}>
                <Text style={styles.header}>User Data</Text>
                <FlatList
                    data={data.members}
                    renderItem={({item}) => (
                        <Card 
                            style={{
                                margin:5, 
                                backgroundColor:'#9075E3', 
                                borderRadius:10
                            }} 
                            onPress={()=>this.props.navigation.navigate('Schedule')}
                        >
                            <View style={styles.datacontainer}>
                                <Text style={styles.name}>Name - {item.real_name}</Text>
                                <Text style={styles.location}> Id - {item.id}</Text>
                                <Text style={styles.location}>Timezone - {item.tz}</Text>
                            </View>
                        </Card>
                    )}
                    keyExtractor={member=> member.id}
                />  
            </View>
        )
    }
}

请在此处帮助我解决此问题.我的日历视图代码如下:

Help me to resolve this issue here. My code for calendar view as follows:

import React, { Component } from 'react';
import { Text, View, Dimensions } from 'react-native';
import data from '../data/db.json';
import EventCalendar from 'react-native-events-calendar';
let { width } = Dimensions.get('window');


export default class ScheduleScreen extends Component {
        
        render() {
            return (
            <View style={{ flex: 1, marginTop: 20 }}>
                {data.members[0].activity_periods.map((period, index) => {
                    return(
                        <EventCalendar
                            eventTapped={this.eventClicked.bind(this)}
                            events={
                                data.members.activity_periods
                            }
                            width={width}
                            size={60}
                            initDate={'2019-02-01'}   
                            scrollToFirst
            
                        />
                    )
                })}
                
            </View>
            );
        }
}

推荐答案

首先映射数据 1

const newData = Data.members.map((val) =>
  val.activity_periods.map((act) => act)
);

之后通过您的 Flatlist 中的导航传递数据

after that passing the data through navigation inside your Flatlist

<FlatList
      data={data.members}
      renderItem={({item}) => (
      <Card 
          style={{
                  margin:5, 
                  backgroundColor:'#9075E3', 
                  borderRadius:10
                }} 
          onPress={()=>this.props.navigation.navigate('Schedule', {data : newData})}
          >
               <View style={styles.datacontainer}>
               <Text style={styles.name}>Name - {item.real_name}</Text>
               <Text style={styles.location}> Id - {item.id}</Text>
               <Text style={styles.location}>Timezone - {item.tz}</Text>
               </View>
           </Card>
      )}
   keyExtractor={member=> member.id}
/>  

这篇关于在显示 React 本机日历事件方面需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！