Question

我使用了与realm db本地的反应。领域架构如下：

  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显示整数是因为您没有以正确的格式构造dataSource，请参阅此处的文档：link。

你需要构建类似的东西：

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

但是现在你所拥有的只是一个对象数组[realmItemOne, realmItemTwo]，如果你只传入一个对象数组来构造将被cloneWithRowsAndSections消耗的数据源，{{1 category中的param将成为here的整数索引，Object.keys（arrayOfObjects）将返回renderSectionHeader

所以你要映射你的[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参数应该是其中一个todoItem对象的数据属性。您可以尝试在renderRow中替换{item.value}，以查看您的设置中实际存在的项目。如果您能够构建正确的数据来提供{item}。

，我相信这将会得到解决

有关对于Realm更新的listerning的后续评论：你可以做这样的事情

dataSource

如何使用节标题呈现Realm ListView

1 个答案: