Question

为了使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);

我衷心希望有人能够帮助我！提前致谢！！

Answer 1

您需要从导航中读取以下值

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

将Firebase数据传递到React Native Expo中的其他屏幕

1 个答案: