如何根据反应本机中的条件在不同组件之间导航

Question

我正在用 React Native 构建一个移动应用程序，其中我的视频和音频来自同一个数据数组。现在我将它们渲染成一个平面列表，音频和视频随机组合在一起。现在我想要如果我点击音频文件，它应该导航到 Audios 组件，如果我点击任何视频它应该导航到 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

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

也许对你有帮助

Answer 2

我想您正在从数据数组中获取文件扩展名示例 .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>

如何根据反应本机中的条件在不同组件之间导航

How to navigate between different components based on conditions in react native

javascript

reactjs

react-native

react-native-android

react-navigation