Как перемещаться между различными компонентами на основе условий в реагировать родной

Question

Я создаю мобильное приложение в режиме реального времени, в котором у меня есть видео и Aud ios, поступающие в одном массиве данных. Теперь я превращаю их в плоский список, и Aud ios и видео собираются случайно. Теперь я хочу, чтобы, если я нажму на аудиофайл, он должен перейти к компоненту Aud ios, а если я нажму на любое видео, он должен перейти к компоненту Videos. Но я не знаю, как фильтровать и переходить к соответствующим компонентам. Пожалуйста, помогите мне. Спасибо

Мой код

Основной файл: он перемещается к аудио компоненту, либо я нажимаю на аудиофайл, либо на видеофайл

 <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 et c или 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>                

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

может быть, это полезно для вас