我正在用 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>
);
}}
/>
最佳答案
我想您正在从数据数组中获取文件扩展名示例 .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>
关于javascript - 如何根据 React Native 中的条件在不同组件之间导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60717696/