Immer Fehler erhalten "Super-Ausdruck muss entweder Null oder eine Funktion, nicht undefiniert sein." Wenn ich zu dieser Seite navigiere

Question

'use strict'; 
import React, {Component} from 'react'; 
import { Tab, TabLayout } from 'react-native-android-tablayout'; 

import{ 
    ViewPagerAndroid, 
    View, 
    StyleSheet, 
    ScrollView, 
    Text, 
} from 'react-native'; 

import EventList from './javra-event-list'; 

var eventLayout = (
    <ScrollView> 
    <EventList 
     title='Latest Event' 
     event='latest' 
     itemsPerRow={this.props.movies.length} 
     items={this.props.movies} direction={true}/> 
    <EventList 
     title='Event Type' 
     event='event' 
     itemsPerRow={this.props.movies.length} 
     items={this.props.movies} direction={true}/> 
    <EventList 
     title='Popular Event' 
     event='popular' 
     itemsPerRow={this.props.movies.length} 
     items={this.props.movies} direction={true}/> 
    </ScrollView> 
); 

var tabView = eventLayout; 

export default class TabsUi extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     pagePosition: 0, 
    } 
    } 

    render(){ 
    return(
     <View style={{marginTop:0, flex:1}}> 
     <TabLayout 
      style ={{height:40, backgroundColor: 'skyblue'}} 
      selectedTab = {this.state.pagePosition} 
      onTabSelected = {this.setPagePosition.bind(this)}> 
      <Tab name="Events" style={styles.tab1}/> 
      <Tab name="User Uploads" style={styles.tab1}/> 
     </TabLayout> 
     {tabView} 
     </View> 
    ); 
    } 

    setPagePosition(e:Event){ 
    const pagePosition = e.nativeEvent.position; 
    console.log(pagePosition); 
    this.setState({pagePosition}); 
    switch (pagePosition) { 
     case 0: 
     tabView = (
      <ScrollView> 
      <EventList 
       title='Latest Event' 
       event='latest' 
       itemsPerRow={this.props.movies.length} 
       items={this.props.movies} direction={true}/> 
      <EventList 
       title='Event Type' 
       event='event' 
       itemsPerRow={this.props.movies.length} 
       items={this.props.movies} 
       direction={true}/> 
      <EventList 
       title='Popular Event' 
       event='popular' 
       itemsPerRow={this.props.movies.length} 
       items={this.props.movies} 
       direction={true}/> 
      </ScrollView> 
     ); 
     break; 
     case 1: 
     tabView = (
      <View> 
      <Text> 
       Tab content 2 
      </Text> 
     </View> 
     ); 
     break; 
     default: 
    } 
    this.forceUpdate(); 
    } 
} 

Ich bekomme immer den obigen Fehler, wenn ich auf diese Seite navigiere. Ich habe die neueste ECMA-Skriptsyntax mit der neuesten reaktiven Version 0.27 verwendet. Was ist das Problem mit meinem Code?

Jeder Vorschlag wäre willkommen.

Answer 1

Ich hatte das gleiche Problem, ich habe gerade zwei Dateien aktualisiert Tab.js und TabLayout.js auf node_module von https://github.com/AlbertBrand/react-native-android-tablayout dies funktionierte für mich, die wichtigsten Änderungen sind Aufruf Module zu importieren.

import { 
    React, 
    Component, 
    PropTypes, 
    processColor, 
    requireNativeComponent, 
    View, 
} from 'react-native'; 

von

import React, { 
    Component, 
    PropTypes 
} from 'react'; 
import { 
    processColor, 
    requireNativeComponent, 
    View, 
} from 'react-native'; 

ersetzen, sondern besser ersetzen gesamte Datei

Answer 2

jetzt reagieren-native-android-tablayout auf die neueste Version von reagieren-native mehr als 0.28v aktualisiert wird. Danke, für den Autor dieser Bibliothek.

Jetzt wird Tablayout in Android unterstützt.