React Native Timeline ListView

我正在尝试在我的.Net Core React应用程序中实现时间轴 .

这是我的timeline.js代码：

import React from 'react';
import { connect } from 'react-redux';
import Timeline from 'react-native-timeline-listview';

constructor(){
    super()
    this.data = [
      {time: '09:00', title: 'Event 1', description: 'Event 1 Description'},
      {time: '10:45', title: 'Event 2', description: 'Event 2 Description'},
      {time: '12:00', title: 'Event 3', description: 'Event 3 Description'},
      {time: '14:00', title: 'Event 4', description: 'Event 4 Description'},
      {time: '16:30', title: 'Event 5', description: 'Event 5 Description'}
    ]
  }

render(){
    return(
        <Timeline
          data={this.data}
        />
    )
}

export default connect()(Timeline);

这就是我的App.js的样子：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Route } from 'react-router';
import Timeline from './components/Timeline';
...
...
 return (
            <div className="App">
                <header className="App-header">
                    {templates}
                </header>
                <Layout>
                <Route exact path='/' component={Home} />
                <Route path='/timeline' component={Timeline} />
                </Layout>

            </div>

        );
    }
}

export default App;

我得到了意外的令牌，期望在“constructor（）{”..如何解决这个问题，我应该创建一个从React Component扩展的时间轴类吗？

在我添加了从React扩展的类之后，我在Index.js中收到错误“Module parse failed：Unexpected token”：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
            <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

registerServiceWorker();