Question

我正在使用React-Native和node.js制作画廊应用程序，我从Node.js api获得数据，我想根据FlatList中的文件类型显示图像或视频文件，我不知道如何为此写条件

{items.file_Name == 'mp4' ? Video : image }

我正在尝试使用上面的代码，但是我不知道如何获取文件名。所以请检查我的代码

export default class HomeScreen extends React.Component {

constructor(Props) {
    super(Props);
    this.state = {
      error: null,
Posts:[
{"id":166,"user_id":1,"description":"7th test","file_Name":[VID-WA0005.mp4"]},
{"id":10,"user_id":3,"description":" 6th test","file_Name":["10.jpg", "12.jpg"]},
{"id":9,"user_id":2,"description":" 5th test","file_Name":["9.jpg", "14.jpg"]} ],
}
}

 render() {
    const { Posts } = this.state

    return (
      <View style={styles.container}>

<View style={styles.tabContent}>
            <FlatList style={styles.list}
              data={this.state.Posts}

              keyExtractor={(data_posts, index) => {

                return data_posts.id.toString();
              }}

              ItemSeparatorComponent={() => {
                return (
                  <View style={styles.separator} />
                )
              }}
              renderItem={(post, id) => {
                const items = post.item;
                return (
                  <View style={styles.card}>

                    <View style={styles.cardHeader}>                             
                        <Text style={styles.title}>{items.description}</Text>   
                    </View>


                    <View style={styles.cardContent}>
                      {items.file_Name.split('.').reverse()[0] == 'mp4' ?

                        <Video
                          source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
                          style={{ width: '100%', height: 600 }}
                          resizeMode="cover"
                          paused={this.state.paused}
                          controls={true}
                          volume={this.state.volume}
                          muted={this.state.muted}
                          paused={this.state.paused}
                          onLoad={this.onLoad}
                          onBuffer={this.onBuffer}
                          onProgress={this.onProgress}
                        />
                        :
                         <Image style={styles.cardImage} source={{ uri: "http://192.168.1.2:3200/" + item.file_Name }} />
                      }
                    </View>

                  </View>
                )
              }}
            />
            {/* Flatlist Ends*/}
          </View>
     </View>
   );
 }
}

````  

I tried with condition like 
````{items.file_Name.split('.').reverse()[0] == 'mp4' ? <Video /> : <image />}````

But its not working because i am unable to get the file type.
If anyone know how to get the file name and how to display either video or image please tell me .

Answer 1

您可以使用endsWith（）函数来检查给定的字符串是否以指定字符串的字符结尾

{items.file_Name.toString().endsWith("mp4") ? Video : image }

Answer 2

尝试一下

{items.file_Name.split('.').pop() == 'mp4'?<Video /> : <image />}

React-Native在mime /文件类型条件下显示图像或视频

2 个答案: