728x90
App.js
import React from 'react';
import { View, StyleSheet, Text, Dimensions } from 'react-native';
import { WebView } from 'react-native-webview';
const SCREEN_WIDTH = Dimensions.get('window').width;
const App = () => {
return (
<View style={styles.container}>
<View style={styles.videoContainer}>
<WebView source={{ uri: youtubeVideoUrl }} style={styles.webView} />
<View style={styles.overlay} />
</View>
<Text style={styles.title}>Learn React Native in 30 Minutes</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
videoContainer: {
width: SCREEN_WIDTH - 40,
height: (SCREEN_WIDTH - 40) * 0.56, // 16:9 비율
margin: 20,
borderRadius: 10,
overflow: 'hidden',
elevation: 5, // 안드로이드 그림자 효과
shadowColor: '#000', // iOS 그림자 효과
shadowOpacity: 0.2,
shadowRadius: 5,
shadowOffset: {
width: 0,
height: 2,
},
},
webView: {
flex: 1,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)',
},
title: {
marginHorizontal: 20,
marginTop: 20,
fontSize: 24,
fontWeight: 'bold',
color: '#333',
},
});
export default App;
728x90