Json 需要显示React本机日历事件的帮助吗

我是一个有点新的反应本机和乱搞了一段时间的JSON。我想用日历事件视图显示我的json数据。我需要帮助将活动周期数据传递到每个用户的日历中

以下是我的Json文件数据：

{
    "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显示用户数据的代码：

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

import React，{Component}来自“React”
从“react native”导入{文本、视图、样式表、TouchableOpacity、平面列表}；
从“react native paper”导入{Card}
从“../data/db.json”导入数据；
导出默认类UsersScreen扩展组件{
render（）
{
返回(
用户数据
(
this.props.navigation.navigate（'Schedule'）}
>
名称-{item.real_Name}
Id-{item.Id}
时区-{item.tz}
)}
keyExtractor={member=>member.id}
/>  
)
}
}

帮我解决这个问题。我的日历视图代码如下所示：

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

import React，{Component}来自'React'；
从“react native”导入{Text，View，Dimensions}；
从“../data/db.json”导入数据；
从“反应本机事件日历”导入事件日历；
设{width}=Dimensions.get（'window'）；
导出默认类ScheduleScreen扩展组件{
render（）{
返回(
{data.members[0]。活动_periods.map（（period，index）=>{
返回(
)
})}
);
}
}

首先映射数据

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

之后，通过平面列表中的导航传递数据

<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}
/>  

(
this.props.navigation.navigate（'Schedule'，{data:newData}）}
>
名称-{item.real_Name}
Id-{item.Id}
时区-{item.tz}
)}
keyExtractor={member=>member.id}
/>