时间戳

首页 > 解决方案 > 在 React Native Expo 中将 Firebase 数据传递到不同的屏幕

firebase - 在 React Native Expo 中将 Firebase 数据传递到不同的屏幕

问题描述

我一直在努力让 Firebase 在我的应用程序上运行。我是 React Native 的新手，我正在尝试弄清楚如何将 Firebase 数据从一个组件传递到另一个屏幕。

这个概念应该很简单。我有一个名为“ArticleItem”的组件作为数组放置在我的主屏幕上。如果用户点击这篇文章，他应该导航到一个名为“ArticleScreen”的屏幕以读取 Firebase 数据。

主屏幕代码（ArticleItem 是 Firebase 数据的组件）：

<TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate("ArticleScreen", {
      section: card
    });
  }}
>
  <ArticleItem />
</TouchableOpacity>

ArticleItem 组件

return (
  <Container>
    <ListView
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      enableEmptySections
      dataSource={this.ds.cloneWithRows(this.state.listViewData)}
      renderRow={data => (
        <TouchableOpacity>
          <View style={styles.card}>
            <ImageBackground
              source={{ uri: data.val().image }}
              style={[styles.imageView]}
            >
              <Text style={styles.text}>
                {data.val().name}
                {data.val().servings}
                {data.val().category}
              </Text>
              <Text> {data.val().description}</Text>
            </ImageBackground>
          </View>
        </TouchableOpacity>
      )}
    />
  </Container>
);
}
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ArticleItem);

ArticleScreen用户应在其中找到所有 Firebase 数据（出于实验目的，保持简单

class ArticleScreen extends Component {
  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Container>
          <Text>{data.val().name}</Text>
        </Container>
      </SafeAreaView>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ArticleScreen);

我真诚地希望有人能够帮助我！提前致谢！！

标签： firebasereact-nativeexpo

解决方案

您需要从导航中读取值，如下所示

state = {
    search: this.props.navigation.getParam("section", "Default value")
};

推荐阅读