react native 如何根据条件在不同组件之间导航

Question

我正在构建一个原生反应的移动应用程序，其中我的视频和音频来自同一个数据数组。现在我将它们渲染成一个平面列表，音频和视频随机组合在一起。现在我想要如果我点击音频文件，它应该导航到音频组件，如果我点击任何视频，它应该导航到视频组件。但我不知道如何过滤和导航到它们各自的组件。请帮助我。谢谢我的代码主文件：它正在导航到音频组件，我单击音频文件或视频文件 <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等或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>

        );

    }}

/>

也许对你有帮助