javascript - 从多个用户列表中选择特定用户后，如何导航到特定用户的个人资料页面？

Question

如何在react-native中编写此功能的代码？

例如。在 Instagram 中，当您转到关注者页面时，您可以查看整个列表。您可以点击其中任何一个，然后您将导航到该用户的特定个人资料。

我想知道它是否与 React-Navigation 有关，例如传递一些唯一的 id 或代码，但我仍然不清楚，请帮助我。

P.S 我正在使用 Firebase 中的 Cloud Firestore 作为我的数据库。

Answer 1

我的做法如下:

1)创建一个FlatList:

<FlatList
  data={//list of users}
  renderItem={this.renderList}
  keyExtractor={(item, index) => index.toString()}
/>

2) FlatList 中的每个元素都是自定义组件。导航 Prop 也会与数据一起传递给组件。 renderItem 的处理函数如下:

renderList = ({ item }) => (
  <UserSummary data={item} navigation={this.props.navigation} />
);

3) UserSummary 实际上是一个 Touchable 元素(例如 Touchable Opacity)，其 onPress 事件处理程序如下:

onPress={() =>
    props.navigation.navigate("UserDetailsScreen", {
      userDetails: props.data
    })

请注意，我还随导航传递了一些数据。比方说，它是某个唯一的用户 ID。此信息可在 UserDetailsS​​creen 中使用来呈现用户的详细信息。

希望这能给你一个想法。