如何在react native中使用sectionList进行导航

Question

我创建了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>
);
}

现在我需要知道是否按下这个列表中的任何项目，然后导航到每个屏幕。这意味着，如果我触摸奥迪，然后导航到奥迪页面。如何做到这一点？或者知道如何在没有部分列表但看起来像它的情况下做到这一点吗？

Answer 1

首先，您需要包装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>
}
}

Answer 2

我找到了解决方案。只需传递onPress函数中的section.title或任何特定的参数。然后实现这个在onPress函数this.props.navigation.navigate(parameter)中调用的代码。在我的问题中，其中一个参数是Audi，记住你应该在stacknavigator中创建parameter.js(Audi.js(文件。这是我的工作。