如何使用區段標題渲染區域列表視圖

Question

我正在使用與區域數據庫的本地響應。該領域的模式如下：

static schema = { 
    name: 'TodoItem', 
    primaryKey: 'id', 
    properties: { 
     id: {type: 'string'}, 
     value: {type: 'string'}, 
     Category: {type: 'string'}, 
     completed: {type: 'bool', default: false}, 
     createdTimestamp: {type: 'date'} 
    } 
    } 

export const todoItemDS = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2}) 

const mapStateToProps = (state, props) => ({ 
    dataSource: todoItemDS.cloneWithRowsAndSections(todoItemsResults), 
} 

ListView控件標籤如下：

<ListView 
      dataSource={dataSource} 
      renderRow={this.renderRow.bind(this)} 
      renderSectionHeader={this.renderSectionHeader.bind(this)} 
     /> 

和renderSectionHeader：

renderSectionHeader(sectionData, category) { 
    return (
    <Text>{category}</Text> 
) 
} 

renderRow(item){ 
    const {dataSource, deleteTodoItem} = this.props 
    return (
    <View style={{ justifyContent: 'space-between',flexDirection: 'row'}}> 
     <CheckBox onPress={(e) => this.completed(item.id,item.value,e.target.checked)} style={{marginTop: 15 }}checked={item.completed} /> 
     <Text onPress={(e) => this.goToPageTwo(item.id)} style={{ alignSelf: 'center',flex:10}} >{item.value} 
     </Text> 
     <Button iconLeft large transparent primary style={{ height: 30 , flex:1 }} onPress={() => deleteTodoItem(item)}> 
      <Icon name="trash-o" style={{ color: 'red' }} /> 
     </Button> 
    </View>) 
} 

我填todoItems數據源，從這個功能：

export const getTodoItems =() => { 

    const todoItems = TodoItem.get().sorted('createdTimestamp', true); 
    return todoItems 
} 

但是，行和部分將使用空白部分文本和空行文本呈現，如圖中所示。

缺什麼在此代碼，我該如何正確地呈現部分和行？

---

我添加聽者境界代碼填充所述數據源，如下所示：

export const getTodoItems =() => { 
    console.log('create db:', Realm.path) 
    const itemData = {} 
    const todoItems = TodoItem.get().sorted('createdTimestamp', true).filtered('completed=false'); 
    todoItems.addListener((items, changes) => { 
    // Update UI in response to inserted objects 
    changes.insertions.forEach((index) => { 
    if(itemData[items[index].Category]) { 
     itemData[items[index].Category].push(items[index]) 
    } else 
     itemData[items[index].Category] = []//; 
    }); 

    // Update UI in response to modified objects 
    changes.modifications.forEach((index) => { 

    }); 

    // Update UI in response to deleted objects 
    changes.deletions.forEach((index) => { 
    // Deleted objects cannot be accessed directly 
    // Support for accessing deleted objects coming soon... 

    }); 

});; 

    todoItems.forEach((item) => { 
    if(itemData[item.Category]) { 
     itemData[item.Category].push(item) 
    } else 
     itemData[item.Category] = []//; 
    }) 
    return itemData //todoItems 
} 

然而，也看不出添加的條目。添加的項目僅在添加其他項目後才顯示。有任何想法嗎？

Answer 1

呈現的SectionHeader顯示爲整數是因爲您沒有以正確的格式構造數據源，請參閱此處的文檔：link。

需要構建類似：

const todoItemsData = { 
    categoryOne: [itemOne, itemTwo], 
    categoryTwo: [itemThree, itemFour] 
} 

但現在你有什麼是公正的對象[realmItemOne, realmItemTwo]的數組，如果你只是傳遞對象數組來構建要由消耗的數據源在cloneWithRowsAndSections，該category PARAM在renderSectionHeader意志變得整數索引accroding到here，Object.keys（arrayOfObjects）將返回[0, 1, 2, ...]

所以要映射您todoItemsResults和構建像這樣

const itemData = {} 
todoItemsResults.forEach((item) => { 
    if(itemData[item.Category] { 
    itemData[item.Category].push(item) 
    } else 
    itemData[item.Category] = []; 
    } 
}); 

const mapStateToProps = (state, props) => ({ 
    dataSource: todoItemDS.cloneWithRowsAndSections(itemData), 
} 

，不顯示任何數據問題所呈現的行，我想是因爲同樣的問題，item PARAM你內renderRow調用應該是一個數據屬性爲一個你的TodoItem對象。您可以嘗試在{item}範圍內替換{item.value}以查看您的設置中實際上有哪些項目。我相信如果你可以構建正確的數據來餵養你的dataSource，這將得到解決。

---

對於你的跟進評論關於listerning到境界更新： 你可以做這樣的事情

class DummyPage extends Component { 
    constructor(props) { 
    super(props) 
    this.realmUpdated = this.realmUpdated.bind(this); 
    realm.objects('todoItem').addListener('change', this.realmUpdated); 
    } 

    componentWillUnmount() { 
    realm.objects('todoItem').removeListener('change', this.realmUpdated); 
    } 

    realmUpdated() { 
    this.forceUpdate(); 
    } 

    render() { 
    //build your data source in here and render the sectionList 
    } 

}