15-3 RN之FlatList展示发现模块的列表

在上一节中，我们完成了发现模块的数据请求逻辑。在本节中，我们将实现数据的展示功能。

一、创建发现页面组件

1. 创建 Found 文件夹和组件

   在 pages 文件夹下创建 Found 文件夹，并将 Found.ts 文件移动到该文件夹中，重命名为 index.ts。

2. 使用 connect 函数封装组件

   import React from 'react';
   import { FlatList } from 'react-native';
   import { connect, ConnectedProps } from 'react-redux';
   import FoundItem from './FoundItem';
   import { IFound } from '@/models/found';
   
   interface IProps extends ConnectedProps<typeof connector> {}
   
   class Found extends React.PureComponent<IProps> {
     state = {
       list: [] as IFound[],
     };
   
     componentDidMount() {
       const { dispatch } = this.props;
       dispatch({
         type: 'found/fetchList',
         callback: (data: IFound[]) => {
           this.setState({
             list: data,
           });
         },
       });
     }
   
     renderItem = ({ item }: ListRenderItemInfo<IFound>) => {
       return <FoundItem item={item} />;
     };
   
     render() {
       const { list } = this.state;
       return (
         <FlatList
           data={list}
           renderItem={this.renderItem}
           keyExtractor={(item) => item.id}
         />
       );
     }
   }
   
   const connector = connect();
   export default connector(Found);
   

二、创建列表项组件

1. 创建 FoundItem 组件

   在 Found 文件夹中创建 FoundItem.tsx 文件：

   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import { IFound } from '@/models/found';
   
   interface IProps {
     item: IFound;
   }
   
   class FoundItem extends React.PureComponent<IProps> {
     render() {
       const { item } = this.props;
       return (
         <View style={styles.item}>
           <Text style={styles.title}>{item.title}</Text>
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     item: {
       marginBottom: 10,
     },
     title: {
       margin: 5,
     },
   });
   
   export default FoundItem;
   

三、安装视频播放依赖

1. 安装 react-native-video

   yarn add react-native-video
   

2. 安装类型定义文件

   yarn add -D @types/react-native-video
   

3. 重新安装应用

   yarn android
   cd ios && pod install
   cd ..
   

四、实现视频播放功能

1. 安装视频控制组件

   yarn add react-native-video-custom-controls
   

2. 更新 FoundItem 组件

   import React from 'react';
   import { View, StyleSheet } from 'react-native';
   import VideoPlayer from 'react-native-video-custom-controls/dist/VideoPlayer';
   import { IFound } from '@/models/found';
   
   interface IProps {
     item: IFound;
     paused: boolean;
   }
   
   class FoundItem extends React.PureComponent<IProps> {
     render() {
       const { item, paused } = this.props;
       return (
         <View style={styles.item}>
           <VideoPlayer
             paused={paused}
             source={{ uri: item.videoUrl }}
             style={styles.video}
           />
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     item: {
       marginBottom: 10,
     },
     video: {
       height: 220,
     },
   });
   
   export default FoundItem;
   

五、总结

在本节中，我们完成了发现模块的列表展示功能。通过使用 FlatList 和 react-native-video-custom-controls，我们实现了视频列表的展示和播放功能。下一节，我们将继续完善发现模块的功能。