Question

我在React Native ListView中有一个Firebase对象列表。请参见下面的代码。

从Firebase导入数据

getDataForFeed() {

    var feedPosts = this;

    firebase
      .database()
      .ref("/feedPosts/")
      .limitToLast(10)
      .orderByChild('sortingTime')
      .on("child_added", function(data) {
      var newData = [...feedPosts.state.listViewData];
      newData.push(data);
      feedPosts.setState({ listViewData: newData });
    });
}

呈现数据：

<ListView

   enableEmptySections
   dataSource={this.ds.cloneWithRows(this.state.listViewData)}

   renderRow={data => (

   <Card style={{ flex: 0 }}>

       <CardItem
       button
       onPress={data => {
       this.props.navigation.navigate("ViewPost", {
       subject: data.val().subject //This doesn't work.
      });
     }}
    >

      <Body>
         <Text small>
            {data.val().subject} //This works.
         </Text>
      </Body>

     </CardItem>

   </Card>
  )}
/>

当我在“主题”值中放入字符串或整数时，它可以正常工作，但是当我需要所需的值data.val（）。subject时，它将引发此错误。

data.val is not a function.

在下面的文本框中，data.val（）。subject显示得很好。

请帮助我将其设置为正确的格式，以便我将其传递到下一页。

Answer 1

好的。这是我的方法：

我输入了这样的数据：

t1

我制作了一个单独的renderRow函数，而不是内联：

getDataForFeed() {

var feedPosts = this;

firebase
  .database()
  .ref("/feedPosts/")
  .limitToLast(10)
  .orderByChild('sortingTime')
  .on("child_added", function(data) {
  var newData = [...feedPosts.state.listViewData];
  newData.push(data);
  feedPosts.setState({ listViewData: newData });
});
}

然后我像这样渲染列表：

renderRow(data) {
    const { navigate } = this.props.navigation;

    return (
      <Card style={{ flex: 0 }}>
        <CardItem
          button
          onPress={() => {
            navigate("ViewPost", data.val());
          }
            }
          bordered
        >
        </CardItem>
      </Card>
    );
  }

然后，在下一页上，按以下方式访问数据：

<ListView
   enableEmptySections
   dataSource={this.ds.cloneWithRows(this.state.listViewData)}
   renderRow={this.renderRow.bind(this)}
/>

我希望这会有所帮助。如果您需要任何说明，请发表评论。

将Native Pass Firebase对象反应到下一页-反应导航

1 个答案: