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

Question

I am building aa mobile app in react native in which I have videos and audios coming in same data array. Now I am rendering them into a flatlist and audios and videos are coming together randomly. Now I want that If I click on the audio file it should navigate to Audios component and if I click on any video it should navigate to Videos Component. But I don't know how to filter and navigate to their respective components. Kindly help me. Thank you

My code

Main File: It is navigating to Audio component either I click on audio file or either on video file

 <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

I suppose you're getting file extension example .mp4/.mp3 etc or Audio/Video flag from your data array.

Create a function that takes file info example:

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})
}

Pass this to your TouchableOpacity :

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

Answer 2

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>
        );
    }}
/>

maybe it helpful for you