React Native FlatList内视频无法显示问题求助

在FlatList中渲染Video组件时出现无法显示的问题，但将Video代码移到FlatList外可正常工作，结合你提供的代码，以下是几个可行的排查和解决方向：

1. 修复Video组件的Ref声明问题 #

你的VideoItem组件中使用了外部的video ref，这会导致所有列表项共用同一个ref实例，引发渲染冲突。应该在VideoItem内部独立声明ref：

import { useRef, useState } from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';

function VideoItem () {
    // 内部独立声明ref和状态
    const video = useRef(null);
    const [status, setStatus] = useState({});

    return(
        <View style={{height: 500}}>
            <Video
                style={[
                    {width: width, height: "100%"},
                    {borderWidth: 1, borderColor: colors.yellow, borderRadius: 10}
                ]}
                ref={video}
                source={{uri: mediaArray[1]}}
                useNativeControls
                resizeMode="cover"
                onPlaybackStatusUpdate={setStatus}
            />
        </View>
    )
}

2. 确保FlatList及父容器布局正常 #

检查FlatList的父容器是否设置了正确的flex布局，没有高度限制会导致VideoItem的height:500无法生效。同时，keyExtractor返回的key需为字符串类型：

<View style={{flex: 1}}>
    <FlatList 
        style={{flex: 1}} 
        keyExtractor={item => item.toString()}
        data={array} 
        renderItem={({item}) => <VideoItem/>}
    />
</View>

3. 验证视频源的有效性与权限 #

• 确认mediaArray[1]的uri是合法路径：本地文件需使用file://前缀，网络视频需确保设备有网络连接。
• Android项目需在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS项目若使用http链接，需在Info.plist中配置ATS例外：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

4. 临时禁用FlatList虚拟化排查 #

FlatList默认开启的虚拟化（removeClippedSubviews）可能导致视频组件渲染异常，可临时关闭验证：

<FlatList 
    style={{flex: 1}} 
    keyExtractor={item => item.toString()}
    data={array} 
    renderItem={({item}) => <VideoItem/>}
    removeClippedSubviews={false}
/>

注意：禁用虚拟化会影响列表性能，排查完成后建议恢复默认值。

5. 检查Video组件依赖配置 #

如果你使用的是react-native-video库，确认：

• iOS项目已执行pod install完成依赖安装；
• Android项目的链接配置正确（RN 0.60+自动链接，无需手动操作）。

内容的提问来源于stack exchange，提问作者Moemen Hussein