无法在单独的容器中并排播放两个视频，我该如何解决这个问题?当我评论掉一个视频时，另一个视频就会出现并播放

Question

这段代码将渲染到我的Post页面，这是下一段代码

import React from "react";
import { View } from "react-native";
import Post from "../../components/Post";
const Home = () => {
return (
<View>
<Post />
</View>
);
};
export default Home;

这段代码是Post页面，我不得不注释掉一个视频来播放另一个。当我取消评论两个视频时，只有最上面的一个播放(leftContainer)

import React from "react";
import { View } from "react-native";
import Video from "react-native-video";
import styles from "./styles";
const Post = () => {
return (
<View>
{/* <View style={styles.leftContainer}>
<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'}/>
</View> */}
<View style={styles.rightContainer}>
<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"}
/>
</View>
</View>
);
};
export default Post;

下面是我为每个视频分别设置了一个leftContainer和rightContainer的样式表:

import { StyleSheet, Dimensions } from "react-native";
const styles = StyleSheet.create({
leftContainer: {
width: "50%",
height: Dimensions.get("window").height,
flexDirection: "row",
},
rightContainer: {
width: "50%",
height: Dimensions.get("window").height,
flexDirection: "row",
marginLeft: "50%",
},
video: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
flexDirection: "row",
},
});
export default styles;

Answer 1

videoContainer: {
flexDirection: 'row',
},
leftContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
},
rightContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
},