如何在 react-native 中使用 sectionList 进行导航？答案

【问题标题】：How to Navigate with using sectionList in react-native?如何在 react-native 中使用 sectionList 进行导航？
【发布时间】：2020-03-22 14:26:52
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-navigation react-native-sectionlist

【解决方案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>
}
}

【讨论】：

你能解释一下这个详细屏幕是什么吗？是新的js文件吗？
是的，根据您的问题，它是一个新组件，需要使用一些数据
列表屏幕为列表中的每个项目添加一个onPress？这就是我问的。如何在每个列表项中添加 onPress？
不抱歉，我的意思是实现你想要的东西，你需要 2 个屏幕/组件/文件来实现它

【解决方案2】：

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

【讨论】：