[英]How to Navigate with using sectionList in react-native?
我創建了 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
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>
}
}
我找到了解決方案。只需從 onPress 函數傳遞section.title 或任何特定參數。 然后實現在 onPress 函數this.props.navigation.navigate(parameter)
調用的這段代碼。在我的問題中,參數之一是Audi ,記住你應該在 stacknavigator 中創建 parameter.js(audi.js) 文件。 這對我來說是工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.