[英]How to navigate between different components based on conditions in 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>
constructor()
{
super(props)
this.state = {
ItemindexChecked: "",
}
this.Dataarrayholder = latestuploads;
}
............................your code ............
DataFilter(p_value)
{
const newData = this.Dataarrayholder.filter(function (item) {
const itemData = item.value ? item.value.toUpperCase() : ''.toUpperCase();
const textData = p_value.toUpperCase();
return itemData.indexOf(textData) > -1;
if (p_value != "")
{
if (newData == 0) {
return
}
else
{
this.props.navigation.navigate('Audio', { id: newData[0].id });
}
}
});
}
...........................................your code ..............
<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 })
// }
onPress={() => { this.DataFilter(item.value), this.setState({ ItemindexChecked: item.key }) }}
>
<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>
);
}}
/>
也许对你有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.