使用React Native ListView的領域將無法呈現

Question

在一個本機應用程序上工作，該應用程序記錄用戶在“內存”中行走的位置的坐標，並將內存（帶有描述）和一組坐標存儲在Realm中。

我在一個具有不同數據庫的項目中使用了ListView，但是使用realm-listview我無法獲取頁面上呈現的內存的描述。

將我的領域設置存儲在一個如下所示的文件中。 主要操作是將數據存儲在“內存/坐標模式”中，並使用RealObjects.countMemories（）函數獲取要在ListView中使用的數據。 當我在控制台中查看時，它正確地返回了一個領域對象數組。

export default class RealmObjects {}
RealmObjects.MemorySchema = {
  name: 'Memory',
  properties: {
    description: 'string',
    coords: {type: 'list', objectType: 'Coordinate'},
  }
}

RealmObjects.CoordinateSchema = {
  name: 'Coordinate',
  properties: {
    longitude: 'double',
    latitude: 'double',
    timeStamp: 'double'
  }
}

RealmObjects.saveMemory = function(coordinates, description) {
  console.log('---------------realm write-------------')
  console.log(description)
  console.log(coordinates)
    realm.write(() => {
      let memory = realm.create('Memory', {
        description: description,
        id: 1
      });
      let coordList = memory.coords
      for (var i = 0; i < coordinates.length; i++) {
        console.log(i)
              console.log(coordinates[i].timeStamp)

        coordList.push({longitude: coordinates[i].longitude,
          latitude: coordinates[i].latitude,
         timeStamp: coordinates[i].timeStamp});
        console.log(memory.coords[i].timeStamp)
      }

    });
}

RealmObjects.countMemories = function() {
  console.log(realm.objects('Memory'));
  return realm.objects('Memory');
}

import Realm from 'realm';
let realm = new Realm({schema: [RealmObjects.MemorySchema, RealmObjects.CoordinateSchema]});

在我的組件中，我要像這樣import { ListView } from 'realm/react-native'; ListView組件： import { ListView } from 'realm/react-native'; 。

構造器設置如下：

  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(RealmObjects.countMemories()),
    };
    console.log('datasource')
    console.log(this.state.dataSource)
  }

渲染功能設置如下：

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
          <Text>Back</Text>
        </TouchableHighlight>
        <ListView style={styles.listview}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>something: {rowData.description}</Text>}
        />
      </View>
    );
  }

此渲染方法不會在ListView中產生任何結果。 現在，我只是想獲取要在屏幕上顯示的內存描述列表。

對於本機和領域都是新手，因此不確定我的問題是否在這里或其他地方。 任何幫助表示贊賞！

編輯：更改了渲染行和行數據項，使其看起來像這樣記錄數據，該數據記錄了控制台中每行的正確描述，但在屏幕上仍然不顯示任何內容：

  renderRow(rowData) {
    console.log('my data');
    console.log(rowData.description);

    return (
        <Text>{rowData.description}</Text>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonLeft} onPress={() => this.goBack()}>
          <Text>Back</Text>
        </TouchableHighlight>
        <ListView style={styles.listview}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => this.renderRow(rowData)}
        />
      </View>
    );
  }

編輯：當前樣式：

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 12,
    alignItems: 'center',
    marginHorizontal: 10,
    top: 50,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingVertical: 12,
  },
  listview: {
    top: 100,
    backgroundColor: 'rgba(236,64,122,0.7)',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    marginTop: 60,
  },
  buttonRight: {
    position: 'absolute',
    top: 0,
    right: 5,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
  buttonLeft: {
    position: 'absolute',
    top: 0,
    left: 5,
    backgroundColor: 'rgba(236,64,122,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  }
});

Answer 1

我也曾經遇到過同樣的問題。 但是我將來自領域的響應轉換為數組，然后將其傳遞到平面列表，它的工作就像一個魅力。

async getAllPrinterArray() {
          realm = await this.getRealMObject();
          favoritePrinterArray = realm.objects(constants.SCHEMA_SAVE_PRINTERS);
          console.log(favoritePrinterArray);

          if (favoritePrinterArray.length > 0) {
            this.setState({ enable: false });
            arr4 = Array.from(favoritePrinterArray);
          }
          return arr4;
      }

<FlatList
     data={printerObject}
     numColumns={2}
     renderItem={({ item }) => this.renderListRow(item)}
/>