React Native无法在独立容器中并排播放两个视频，该如何修复？

问题根因 #

1. 布局错误：Post组件的根容器未设置flexDirection: row，默认垂直排列，两个高度为全屏的容器上下堆叠，右侧容器被挤出可视区域，造成只有左侧视频能播放的错觉。
2. 组件冲突：未给两个Video组件设置唯一key，可能引发组件复用异常，且react-native-video在部分平台默认限制多实例同时播放。
3. 平台配置缺失：iOS/Android默认未开启多视频同时播放的相关权限。

修复步骤 #

1. 修正布局代码

• Home.js修改：给根容器加flex:1保证子组件占满全屏

import React from "react";
import { View } from "react-native";
import Post from "../../components/Post";

const Home = () => {
  return (
    <View style={{flex: 1}}>
      <Post />
    </View>
  );
};

export default Home;

• Post.js修改：根容器设置水平排列，给每个Video加唯一key

import React from "react";
import { View } from "react-native";
import Video from "react-native-video";
import styles from "./styles";

const Post = () => {
  return (
    <View style={{flex: 1, flexDirection: 'row'}}>
      <View style={styles.leftContainer}>
            <Video
            key="left-video"
            source={{uri: 'https://static.videezy.com/system/resources/previews/000/008/292/original/Young_African_American_Woman_Headphones_2.mp4'}}
            style={styles.video}
            resizeMode={'cover'}
            paused={false}
            />
        </View>

      <View style={styles.rightContainer}>
        <Video
          key="right-video"
          source={{
            uri: "https://static.videezy.com/system/resources/previews/000/008/444/original/Dark_Haired_Girl_in_deep_thought_1.mp4",
          }}
          style={styles.video}
          resizeMode={"cover"}
          paused={false}
        />
      </View>
    </View>
  );
};

export default Post;

• styles.js修改：删除rightContainer冗余的marginLeft属性

import { StyleSheet, Dimensions } from "react-native";

const styles = StyleSheet.create({
  leftContainer: {
    width: "50%",
    height: Dimensions.get("window").height,
  },
  rightContainer: {
    width: "50%",
    height: Dimensions.get("window").height,
  },
  video: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

export default styles;

2. 平台配置适配

• 安卓端：在android/app/src/main/AndroidManifest.xml的Application标签内添加配置，允许多个Exoplayer实例运行

<meta-data android:name="com.google.android.exoplayer2.multipleInstancesEnabled" android:value="true" />

• iOS端：在ios/[项目名]/AppDelegate.mm的didFinishLaunchingWithOptions方法内添加音频会话配置，允许多个音频流同时播放

#import <AVFoundation/AVFoundation.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  AVAudioSession *session = [AVAudioSession sharedInstance];
  [session setCategory:AVAudioSessionCategoryPlayback withOptions:AVAudioSessionCategoryOptionMixWithOthers error:nil];
  [session setActive:YES error:nil];
  // 原有项目代码保留
}

3. 兜底验证

如果修改后仍无法同时播放，可升级react-native-video到最新稳定版，排查是否是版本已知bug。

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