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

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

当我在 "subject" 值中放入一个字符串或整数时，它工作正常，但是当我想要我需要的值时，data.val().subject - 它会抛出这个错误。

data.val is not a function.

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

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

Answer 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");

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

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

React Native Pass Firebase Object To Next Page - React Navigation

react-native

firebase-realtime-database

react-native-navigation