反應母語：可選擇部分列表視圖提供了錯誤

Question

我一個反應，本機代碼項目。我在github上使用了一個插件 - selectablesectionlistview以使可選部分列表視圖正常工作。

我使用的文檔 -

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

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

提供的示例代碼，它不工作。我在渲染函數中獲取了javascript中的錯誤。

錯誤是 - SelectableSectionsListView is undefined. 現已解決。

新錯誤 - data is undefined。

我使用上面的代碼。任何幫助。請。

Answer 1

您展示我覺得代碼只是一個庫中的代碼。我遇到了同樣的問題。並且在將數據json發送給庫調用後，我得到了它的工作。

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'], 
    } 
}; 
} 

在你的代碼中使用它並將數據作爲道具傳遞給庫。它會工作。

Answer 2

我曾經使用過此問題，走了很長一段時間，我可以說。這裏是我的git repo，我已經設置了示例。

有很多事情要考慮以後你做npm install <library>

這裏是index.js的代碼看起來喜歡 -

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

希望它能幫助:)編碼愉快！