railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ⚡ added example video

Browse Source
This commit is contained in:
yungblud 2023-04-13 16:20:15 +09:00
parent 4ddecbf42b
commit 9e9c5ec01a
1 changed files with 4 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
examples/LaftelVideo/App.tsx
View File

@ -10,111 +10,18 @@
import React, {type PropsWithChildren} from 'react'; import React, {type PropsWithChildren} from 'react';
import { import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet, StyleSheet,
Text,
useColorScheme,
View, View,
} from 'react-native'; } from 'react-native';
import Video from 'react-native-video'
import { const App = () => {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const Section: React.FC<
PropsWithChildren<{
title: string;
}>
> = ({children, title}) => {
const isDarkMode = useColorScheme() === 'dark';
return ( return (
<View style={styles.sectionContainer}> <View style={{flex: 1}}>
<Text <Video style={{flex:1}} source={{uri: "https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4"}} />
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View> </View>
); );
}; };
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default App; export default App;