#react-native #react-native-video
Вопрос:
Этот код должен отображаться на странице моего поста, которая является следующим блоком кода
import React from "react";
import { View } from "react-native";
import Post from "../../components/Post";
const Home = () => {
return (
<View>
<Post />
</View>
);
};
export default Home;
Этот код-страница публикации, на которой мне приходится комментировать одно видео, чтобы воспроизвести другое. Когда я раскомментирую оба видео, воспроизводится только верхнее (левый контент)
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;
Вот таблица стилей, в которой я настроил левый и правый контейнеры для каждого видео соответственно:
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;
Ответ №1:
videoContainer: {
flexDirection: 'row',
},
leftContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
},
rightContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
},