Некоторое время пытался получить данные из xml url.Это первый раз, когда я пробовал это и не могу понять это.Любые данные, которые мне не хватает, я могу предоставить.
Я пытался получить события с Facebook, но у меня было больше проблем с этим, поэтому сейчас я пытаюсь получить данные с короткой проводки.
IЯ не уверен, как напрямую анализировать XML для возврата данных.Я понимаю, что для этого есть много лишних слов, но я думаю, что я слишком долго этим занимался и мог бы использовать некоторые свежие глаза.
import React from 'react';
import {
StyleSheet,
View,
ActivityIndicator
} from 'react-native';
import { FlatList } from 'native-base';
import { List, ListItem } from 'react-native-elements';
var eventList = '<!DOCTYPE html>\n' +
'<html lang="en">\n' +
'<head>\n' +
' <style>\n' +
' .rhFormSection{margin-bottom:10px}.panel{margin-bottom:20px;border-width:0;color:#333}.panel-flat>.panel-heading+.panel-body{padding-top:0}.rhFormSection .panel-body{padding:10px}.panel-body{position:relative;padding:20px}.row{margin-left:-10px;margin-right:-10px}.rhInlineGroup{margin-bottom:0;min-height:38px;position:relative!important}.form-group{margin-bottom:20px;position:relative}.full-width{width:100%}.input-group{position:relative;display:table;border-collapse:separate}.dateGroup{width:50px;background-color:#d3d3d3;height:100%;float:left}.appDay1,.appDay2{width:100%;text-align:center;float:left}.appDay1{background:#008b8b;color:#fff!important}.appDay2{height:35px;line-height:35px;font-weight:700;font-size:12pt}.contentGroup{float:left;margin-left:10px;width:80%}.appDate1,.appDate2,.appTitle{float:left;width:100%}.appTitle{height:20px;font-weight:700}\n' +
' </style>\n' +
'</head>\n' +
'<body>\n' +
'<div class="panel panel-flat rhSectionPanel rhFormSection " data-section="appointments">\n' +
' <div class="panel-body">\n' +
' <div class="row">\n' +
' @[LOADING]\n' +
' </div>\n' +
' </div>\n' +
'</div>\n' +
'</body>\n' +
'</html>';
var html = '';
export default class EventsScreen extends React.Component {
static navigationOptions = {
title: 'Events',
};
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false,
webViewHeight: 100,
}
}
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const { page, seed } = this.state;
const url = `http://website.api.stubwire.com/?website=ChopShopLive-App&version=8`;
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: page === 1 ? res.results : [...this.state.data, ...res.results],
error: res.error || null,
loading: false,
refreshing: false
});
})
.catch(error => {
this.setState({ error, loading: false });
});
}
handleRefresh = () => {
this.setState(
{
page: 1,
seed: this.state.seed + 1,
refreshing: true
},
() => {
this.makeRemoteRequest();
}
);
};
_updateWebViewHeight = (event) => {
this.setState({webViewHeight: parseInt(event.jsEvaluationValue)});
}
openLink = (url) => {
Linking.openURL(url)
.catch(err => console.error('An error occurred', err));
}
saveEvent = (data) => {
var arrNames = []
var monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
for(let i = 0; i < data.length; i++) {
let event = data[i]
let eventId = events.event.id
let name = events.event.name
arrNames.push(name)
let place = events.event.venue.name
let street = events.event.venue.address
let city = events.event.venue.city
let state = events.event.venue.state
let zip = events.event.venue.zip
let url = events.event.venue.url
let location = street + ', ' + city + ', ' + state + ' ' + zip
let description = typeof events.event.shortDescription !== 'undefined' ? events.event.shortDescription : ''
let ticket_uri = typeof events.event.urls.buyNowLink !== 'undefined' ? events.event.urls.buyNowLink : ''
let startDate = events.event.dateTime
startDate = startDate.replace(startDate.slice(-5), ".000Z");
let ageDesc = typeof events.event.ageDescription !== 'undefined' ? events.event.ageDescription : null
let alarms = [{
date: startDate,
structuredLocation: {
title: events.event.name,
// proximity: 'enter',
// radius: 500,
coords: {
latitude: place.location.latitude,
longitude: place.location.longitude
}
}
}]
let settings = {
url: ticket_uri,
location: location,
notes: description,
description: description,
startDate: startDate,
ageDesc: ageDesc,
allDay: false,
alarms: alarms
}
if(i == 0)
{
settings.needDeleteAllEvent = true
}
var dt = new Date(startDate);
var shortMonth = monthNames[dt.getMonth()];
var shortMonthSub = shortMonth.substring(0, 3).toUpperCase();
var fullDateString = weekday[dt.getDay()] + ', ' + shortMonth + ' ' + dt.getDate() + ', ' + dt.getFullYear();
var ageDescString = '';
if(ageDesc !== null)
{
var dt2 = new Date(ageDesc);
ageDescString = ' to ' + dt2.getHours() + ':' + dt2.getMinutes();
}
var fullHourString = 'from ' + dt.getHours() + ':' + dt.getMinutes() + ageDescString;
var nameString = name;
if(nameString.length > 35)
{
nameString = nameString.substring(0, 35) + '...';
}
try {
RNCalendarEvents.saveEvent(name, settings)
html += '<div class="form-group rhInlineGroup col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 5px; cursor: pointer;">' +
' <div class="input-group full-width">' +
' <div class="dateGroup"><span class="appDay1"> '+shortMonthSub+' </span> <span class="appDay2"> '+dt.getDate()+' </span></div>' +
' <div class="contentGroup"><span class="appTitle"> ' + nameString + ' </span> <span class="appDate1">'+fullDateString+'</span><span class="appDate2">' + fullHourString + '</span></div>' +
' </div>' +
' </div>';
}
catch (error) {
}
}
eventList = eventList.replace('@[LOADING]', html);
}
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.makeRemoteRequest();
}
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View style={{ paddingVertical: 20, borderTopWidth: 1, borderColor: "#CED0CE"}}>
<ActivityIndicator animating size="large" />
</View>
);
};
render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.data}
renderItem={({ events }) => (
<ListItem
roundAvatar
title={`${events.event.name}`}
subtitle={events.event.dateTime}
avatar={{ uri: events.event.images.eventImageURLSmall }}
containerStyle={{ borderBottomWidth: 0 }}
/>
)}
keyExtractor={events => events.event.urls.buyNowLink}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
/>
</List>
);
}
}
To fetch data from url and show on ios.
Result:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `EventsScreen`.
Below is my package.json