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) => {&nbsp;// const filetype = check for file type, Audio/Video or file extensionif (filetype === 'Audio'){&nbsp; this.props.navigation.navigate('Audio', {id: fileinfo.id})} else {&nbsp; this.props.navigation.navigate('Video', {id: fileinfo.id})}将此传递给您的TouchableOpacity：<TouchableOpacity&nbsp; onPress={() => navigateTo(item)}>&nbsp; // your code here</TouchableOpacity>&nbsp;&nbsp;

Answer 2

constructor(){&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; ItemindexChecked: "",&nbsp; &nbsp; }&nbsp; &nbsp; this.Dataarrayholder = latestuploads;}............................your code ............DataFilter(p_value){&nbsp; &nbsp; const newData = this.Dataarrayholder.filter(function (item) {&nbsp; &nbsp; &nbsp; &nbsp; const itemData = item.value ? item.value.toUpperCase() : ''.toUpperCase();&nbsp; &nbsp; &nbsp; &nbsp; const textData = p_value.toUpperCase();&nbsp; &nbsp; &nbsp; &nbsp; return itemData.indexOf(textData) > -1;&nbsp; &nbsp; &nbsp; &nbsp; if (p_value != "")&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (newData == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.navigation.navigate('Audio', { id: newData[0].id });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}...........................................your code ..............<FlatList&nbsp; &nbsp; horizontal&nbsp; &nbsp; data={latestuploads}&nbsp; &nbsp; keyExtractor={item => item.id}&nbsp; &nbsp; renderItem={({ item }) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ScrollView horizontal={true}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card transparent style={{ width: 170 }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //onPress={() =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;// this.props.navigation.navigate('Audio', { id: item.id })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() => { this.DataFilter(item.value), this.setState({ ItemindexChecked: item.key }) }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ImageBackground&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source={{ uri: item.image_url }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.image}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source={require('../assets/play-icon.png')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.icon}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ImageBackground>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardItem cardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text numberOfLines={1} style={styles.title}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardItem cardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.speaker}> {item.speaker} </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ScrollView>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}/>也许对你有帮助