React Native 将 Firebase 对象传递到下一页 - React Navigation答案

【问题标题】：React Native Pass Firebase Object To Next Page - React NavigationReact Native 将 Firebase 对象传递到下一页 - React Navigation
【发布时间】：2018-12-07 12:31:39
【问题描述】：

我在 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 显示得很好。

请帮我把它变成正确的格式，以便我将它传递到下一页。

【问题讨论】：

如果你放的不是字符串或返回字符串的函数， {data.val().subject} 会不会有问题？不过，您应该能够传递任何对象。你能显示更多的代码吗？一个主题被分配一个不起作用的值的例子？
{data.val().subject} 工作得很好。我更新了上面的代码以提供更多上下文。

标签： react-native firebase-realtime-database react-native-navigation

【解决方案1】：

好的。我就是这样做的：

我是这样引入数据的：

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 函数而不是内联：

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)}
/>

然后，在下一页，数据是这样访问的：

console.log(this.props.navigation.state.params, "Navigation");

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

【讨论】：