Как получить конкретный элемент плоского списка в React-Native - PullRequest
Новая
       41

Как получить конкретный элемент плоского списка в React-Native

0 голосов
/ 12 декабря 2018

Как я могу отобразить элемент только в FlatList, если item.id совпадает с идентификатором в json?

Я новичок в реакции на нативный и JavaScript, так что, возможно, это глупый вопрос.

Мой код на данный момент: 

export default class DetailsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
  }

  componentDidMount() {
    this.setState({
      isLoading: false,
      dataSource: data.data
    });
  }

render() {
    if (this.state.isLoading) {
      return (
        <View>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View>
        <FlatList
          data={this.state.dataSource}
          renderItem={({ item }) => (this.renderDetailView(item))}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

Это простой рендеринг Flatlist, и эта работа довольно хороша.'RenderDetailView' очень сложный и длинный, поэтому я не мог добавить код.

Но это выглядит так: 

renderDetailView(item) {
    return (
      <View style={styles.info} key={item.id}>
        <View>
          <Text style={styles.detailView}>
            {item.name}
          </Text>
          <Text>{'\n'}</Text>
        </View>
         ...
      </View>
    );
  }

В конечном проекте я хочу обработать щелчок надругой FlatList и показать детали выбранного элемента.Элемент, по которому щелкнули, «отправляет» идентификатор этому классу, и поэтому я получаю конкретный detailView.

Извините за мой плохой английский.

1 Ответ

0 голосов
/ 12 декабря 2018

Если вы хотите перейти на страницу сведений, когда вы нажимаете на элемент списка, вы должны использовать навигационную библиотеку ( реагировать-навигация является самой популярной).

Я создалбазовый рабочий пример: https://snack.expo.io/@sanjar/so-53747271

(В этом примере я использовал реагировать-навигацию 2 , в то время как последняя версия - это навигация-навигация 3, поэтому используйте этот вариант, если вы хотите воспроизвестиэто локально)

ps: я не уверен, чтобы полностью понять ваши требования, вы можете добавить комментарий, если мой ответ был не по теме или если у вас есть какие-либо вопросы

...