reagieren nativ: auswählbare Abschnitt Listenansicht gibt Fehler

Question

Ich arbeite an einem reaktiven nativen Code-Projekt. Ich verwende ein Plugin auf Github-selectablesectionlistview, um die Listenansicht der auswählbaren Abschnitt zu arbeiten.

Ich bin mit dem Beispielcode in dem Dokumentations- bereitgestellt

var SelectableSectionsListView = require('react-native-selectablesectionlistview'); 

// inside your render function 
<SelectableSectionsListView 
    data={yourData} 
    cell={YourCellComponent} 
    cellHeight={100} 
    sectionHeaderHeight={22.5} 
/> 

und es funktioniert nicht. Ich bekomme Fehler in JavaScript innerhalb der Renderfunktion.

Fehler is- SelectableSectionsListView is undefined. DIESES IST JETZT BEHOBEN.

Neuer Fehler - data is undefined.

Ich verwende den obigen Code. irgendeine Hilfe. Bitte.

Answer 1

Der Code, den Sie zeigen, ich fühle, ist nur ein Bibliothekscode. Ich war auf dasselbe Problem gestoßen. und ich habe es funktioniert nach dem Senden eines Daten-JSON zum Bibliotheksanruf.

class MyComponent extends Component { 
constructor(props, context) { 
super(props, context); 

this.state = { 
    data: { 
    A: ['some','entries','are here'], 
    B: ['some','entries','are here'], 
    C: ['some','entries','are here'], 
    D: ['some','entries','are here'], 
    E: ['some','entries','are here'], 
    F: ['some','entries','are here'], 
    G: ['some','entries','are here'], 
    H: ['some','entries','are here'], 
    I: ['some','entries','are here'], 
    J: ['some','entries','are here'], 
    K: ['some','entries','are here'], 
    L: ['some','entries','are here'], 
    M: ['some','entries','are here'], 
    N: ['some','entries','are here'], 
    O: ['some','entries','are here'], 
    P: ['some','entries','are here'], 
    Q: ['some','entries','are here'], 
    R: ['some','entries','are here'], 
    S: ['some','entries','are here'], 
    T: ['some','entries','are here'], 
    U: ['some','entries','are here'], 
    V: ['some','entries','are here'], 
    X: ['some','entries','are here'], 
    Y: ['some','entries','are here'], 
    Z: ['some','entries','are here'], 
    } 
}; 
} 

Verwenden Sie dies in Ihrem Code und übergeben Sie Daten als Requisiten an die Bibliothek. Es wird klappen.

Answer 2

Ich habe dieses Problem für eine lange Zeit habe ich sagen können. Hier ist mein git repo wo ich das Beispiel eingerichtet habe.

Es gibt viele Dinge in Betracht gezogen werden, nachdem Sie tun npm install <library>

Hier ist, wie der Code von index.js wie-

'use strict'; 
var React = require('react-native'); 
var {Component, PropTypes, View, Text, TouchableHighlight,AppRegistry} = React; 

var AlphabetListView = require('react-native-alphabetlistview'); 

class SectionHeader extends Component { 
    render() { 
    // inline styles used for brevity, use a stylesheet when possible 
    var textStyle = { 
     textAlign:'center', 
     color:'#fff', 
     fontWeight:'700', 
     fontSize:16 
    }; 

    var viewStyle = { 
     backgroundColor: '#ccc' 
    }; 
    return (
     <View style={viewStyle}> 
     <Text style={textStyle}>{this.props.title}</Text> 
     </View> 
    ); 
    } 
} 

class SectionItem extends Component { 
    render() { 
    return (
     <Text style={{color:'#f00'}}>{this.props.title}</Text> 
    ); 
    } 
} 

class Cell extends Component { 
    render() { 
    return (
     <View style={{height:30}}> 
     <Text>{this.props.item}</Text> 
     </View> 
    ); 
    } 
} 

class reactnativeAlphabeticalListView extends Component { 

    constructor(props, context) { 
    super(props, context); 

    this.state = { 
     data: { 
     A: ['asome','aentries','are here'], 
     B: ['bbsome','bebntries','bare here'], 
     C: ['csome','centries','care here'], 
     D: ['dsome','dentries','dare here'], 
     E: ['esome','eentries','eare here'], 
     F: ['fsome','fentries','are here'], 
     G: ['gsome','gentries','gare here'], 
     H: ['hsome','hentries','hare here'], 
     I: ['isome','ientries','iare here'], 
     J: ['jsome','jentries','jare here'], 
     K: ['ksome','kentries','kare here'], 
     L: ['lsome','lentries','lare here'], 
     M: ['msome','mentries','mare here'], 
     N: ['nsome','nentries','nare here'], 
     O: ['osome','oentries','oare here'], 
     P: ['psome','pentries','pare here'], 
     Q: ['qsome','qentries','qare here'], 
     R: ['rsome','rentries','rare here'], 
     S: ['some','sentries','sare here'], 
     T: ['tsome','tentries','tare here'], 
     U: ['usome','uentries','uare here'], 
     V: ['vsome','ventries','vare here'], 
     W: ['wsome','wentries','ware here'], 
     X: ['xsome','xentries','xare here'], 
     Y: ['ysome','yentries','yare here'], 
     Z: ['zsome','zentries','zare here'], 
     } 
    }; 
    } 

    render() { 
    return (
     <AlphabetListView 
     data={this.state.data} 
     cell={Cell} 
     cellHeight={30} 
     sectionListItem={SectionItem} 
     sectionHeader={SectionHeader} 
     sectionHeaderHeight={22.5} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('reactnativeAlphabeticalListView',() => reactnativeAlphabeticalListView); 

Hoffnung sieht es hilft :) Glücklich Codierung!