我创建了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>
);
}
现在,我需要知道是否按此列表中的任何项目,然后导航至每个屏幕。这意味着如果我触摸奥迪,然后导航到奥迪页面。这该怎么做?或任何想法如何在没有节列表但看起来像的情况下执行此操作?
首先,您需要包装您的SectionList屏幕和要导航到的详细信息屏幕,
并且在列表屏幕中为列表中的每个项目添加一个onPress