Как перейти на страницу профиля конкретного пользователя после выбора его / ее из списка нескольких пользователей?

Question

Как мне кодировать эту функциональность в реагирующем родном?

например. В Instagram, когда вы заходите на страницу своих подписчиков, вы можете просмотреть весь список. Вы можете нажать на любой из них, и вы перейдете к определенному профилю этого пользователя.

Мне было интересно, связано ли это с React-Navigation, например, передачей какого-то уникального идентификатора или кода, но мне все еще неясно,пожалуйста, помогите мне.

PS Я использую облачный firestore из firebase в качестве базы данных.

Answer 1

Я бы сделал это следующим образом:

1) Создать FlatList:

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

2) Каждый элемент в FlatList является пользовательским компонентом. Навигационные реквизиты также передаются компоненту вместе с данными. Функция обработчика для renderItem приведена ниже:

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

3) UserSummary на самом деле является элементом Touchable (скажем, Touchable Opacity), а обработчик события onPress для этого приведен ниже:

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

Обратите внимание, что я также передал некоторые данные вместе с навигацией. Допустим, это какой-то уникальный идентификатор пользователя. Эта информация может быть использована в UserDetailsScreen для отображения деталей пользователя.

Надеюсь, это даст вам представление.

Answer 2

Вы можете сослаться на эту ссылку. Вы можете передать id в качестве параметра как this.props.navigation.navigate('RouteName', { /* params go here */ }).