在显示 React 本机日历事件方面需要帮助答案

【问题标题】：Need help in displaying React native calendar events在显示 React 本机日历事件方面需要帮助
【发布时间】：2021-01-10 14:46:11
【问题描述】：

我对原生反应有点陌生，并且在一段时间内一直在搞乱 JSON。我想用日历事件视图显示我的 json 数据。我需要帮助将 activity_periods 数据传递到每个用户的日历。

这是我的 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"
                }
            ]
        }
    ]
}

使用平面列表显示用户数据的代码：

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

【问题讨论】：

标签： json reactjs react-native react-native-calendars

【解决方案1】：

首先你首先映射数据

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

之后通过 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}
/>

【讨论】：