javascript - 如何根据 React Native 中的条件在不同组件之间导航

Question

我正在用 React Native 构建一个移动应用程序，其中视频和音频来自同一数据数组。现在我将它们渲染成平面列表，音频和视频随机组合在一起。现在我希望如果我单击音频文件，它应该导航到音频组件，如果我单击任何视频，它应该导航到视频组件。但我不知道如何过滤和导航到各自的组件。请帮助我。谢谢

我的代码

主文件:它正在导航到音频组件，无论我单击音频文件还是视频文件

 <FlatList
        horizontal
        data={latestuploads}
        keyExtractor={item => item.id}
        renderItem={({item}) => {
          return (
            <ScrollView horizontal={true}>
              <Card transparent style={{width: 170}}>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate('Audio', {id: item.id})
                  }>
                  <CardItem>
                    <ImageBackground
                      source={{uri: item.image_url}}
                      style={styles.image}>
                      <Image
                        source={require('../assets/play-icon.png')}
                        style={styles.icon}
                      />
                    </ImageBackground>
                  </CardItem>
                </TouchableOpacity>

                <CardItem cardBody>
                  <Text numberOfLines={1} style={styles.title}>
                    {item.title}
                  </Text>
                </CardItem>
                <CardItem cardBody>
                  <Text style={styles.speaker}> {item.speaker} </Text>
                </CardItem>
              </Card>
            </ScrollView>
          );
        }}
      />

Answer 1

我想您正在从数据数组中获取文件扩展名示例 .mp4/.mp3 等或 Audio/Video 标志。

创建一个采用文件信息示例的函数:

navigateTo = (fileinfo) => {
 // const filetype = check for file type, Audio/Video or file extension

if (filetype === 'Audio'){
  this.props.navigation.navigate('Audio', {id: fileinfo.id})
} else {
  this.props.navigation.navigate('Video', {id: fileinfo.id})
}

将其传递给您的TouchableOpacity:

<TouchableOpacity
  onPress={() => navigateTo(item)}>
  // your code here
</TouchableOpacity>