Как перемещаться с использованием sectionList в реагировать на родной? - PullRequest
Новая
       24

Как перемещаться с использованием sectionList в реагировать на родной?

0 голосов
/ 22 марта 2020

Я создаю список из 12 элементов. Это мой код, 

render() {
    return (
      <View style={styles.container}>
        <SectionList
          renderItem={({item}) =><Text onPress={() => alert(item)} style={styles.item}>{item}</Text> }
          sections={[
            {title: 'A', data: ['Audi']},
            {title: 'B', data: ['BMW']},
            {title: 'H', data: ['Honda', 'Hyundai']},
            {title: 'J', data: ['Jaguar']},
            {title: 'K', data: ['Kia']},
            {title: 'M', data: ['Mazda','Mercedes-Benz', 'Mitsubishi']},
            {title: 'N', data: ['Nissan']},
            {title: 'T', data: ['Toyota']},
            {title: 'V', data: ['Volkswagen']},
          ]}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }

Теперь мне нужно знать, если нажать какой-либо элемент из этого списка, а затем перейти к каждому экрану. Что означает, что если я коснусь Audi, перейдите на страницу Audi. Как это сделать? Или есть идеи, как это сделать без списка разделов, но похоже на это?

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Я нашел решение. Просто передайте section.title или любой конкретный c аргумент из функции onPress. Затем реализуйте этот код, который вызывал функцию onPress this.props.navigation.navigate(parameter). В моей задаче одним из параметров является Audi , и помните, что вы должны создать файл параметра. js (audi. js) в stacknavigator. Это работа для меня.

0 голосов
/ 22 марта 2020

Прежде всего, вам нужно обернуть экран SectionList и подробный экран, к которому вы будете перемещаться,

и на экране списка добавить onPress для каждого элемента в списке 

navigateToDetail = car => {
  this.props.navigation.navigate(DetailScreen, {
     name: car
  }
}

render (){ 
  renderItem={({item}) =><Text onPress={navigateToDetail} style={styles.item}>{item}</Text> }
}

и на экране ваших данных вам нужно сделать это 

class DetailScreen extends Component {

 render() {
 const car = this.props.navigation.getParam("name", "novalue)

  return <Text>{car}</Text>
}
}
...