phản ứng gốc: chế độ xem danh sách phần có thể chọn cho lỗi

Question

Tôi đang làm việc trên dự án mã nguồn gốc phản ứng. tôi đang sử dụng một plugin trên github- selectablesectionlistview để xem chế độ xem danh sách phần có thể chọn.

Tôi đang sử dụng mã mẫu được cung cấp trong documentation-

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

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

và nó không hoạt động. Tôi nhận được lỗi trong javascript bên trong hàm render.

Lỗi là SelectableSectionsListView is undefined. NÀY ĐƯỢC GIẢI QUYẾT NGAY BÂY GIỜ.

Lỗi mới - data is undefined.

Tôi đang sử dụng mã ở trên. bất kỳ sự giúp đỡ nào. xin vui lòng.

Answer 1

Mã mà bạn đang hiển thị tôi cảm thấy chỉ là mã thư viện. Tôi đã gặp phải vấn đề tương tự. và tôi đã làm việc đó sau khi gửi một json dữ liệu đến cuộc gọi thư viện.

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

Sử dụng mã này trong mã của bạn và chuyển dữ liệu làm đạo cụ cho thư viện. Nó sẽ hoạt động.

Answer 2

Tôi đã trải qua vấn đề này trong một thời gian dài tôi có thể nói. Đây là số git repo của tôi, nơi tôi đã thiết lập ví dụ.

Có rất nhiều điều cần được xem xét sau khi bạn làm npm install <library>

Sau đây là cách mã của index.js trông như-

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

Hy vọng nó sẽ giúp :) Chúc mừng mã hóa!