react-native-video
react-native init Video
cd Video
cat package.json
{
"name": "Video",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.57.8"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
npm install react-native-video --save
cat package.json
{
"name": "Video",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-video": "^4.2.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
react-native link
rnpm-install info Linking react-native-video ios dependency
rnpm-install info Platform 'ios' module react-native-video has been successfully linked
rnpm-install info Linking react-native-video android dependency
rnpm-install info Platform 'android' module react-native-video has been successfully linked
react-native run-ios
app.js 내용
import React, { Component } from "react"
import { StyleSheet, Text, View } from "react-native"
class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>Text</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
}
})
export default App
import Video 하고 비디오 출력 , warbler.mp4 파일 로컬 경로에 추가
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from "react"
import { StyleSheet, Text, View } from "react-native"
import Video from "react-native-video"
class App extends Component {
render() {
return (
<View style={styles.container}>
<Video
source={require("./warbler.mp4")} // URL이나 local 파일을 지정할 수 있다.
rate={1.0} // 0은 일시정지, 1은 정상 속도
volume={1.0} // 0은 음소거, 1은 정상 음량
muted={false} // 오디오를 완전히 음소거
paused={false} // 비디오를 완전히 일시 정지
// resizeMode="cover" // 화면 비율을 유지한 채로 화면 가득 채움
repeat={true} // 무한 반복
style={styles.fullScreen}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
fullScreen: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}
})
export default App
아래 에러 발생할 경우
TypeError: Cannot read property 'Constants' of undefined
해당 xcode => Build Phases => Link Binary With Libraries
libRCTVideo.a 삭제 후 video 추가 해서 해결
ㄷㅏ시 테스트 하려니 잘 수행되네..
아래는 내가 에러 내용 찾을 때 검색했던 사이트와 해결내용
https://github.com/react-native-community/react-native-video/issues/438
I found the solution that fixed me the problem.
Go to.. xCode -> Build Phases -> Link Binary With Libraries.
In the list find the file "libRCTVideo.a", if you will see it like icon of clean white paper than just delete it from the list and add it again by click on the plus (+) icon and just type "video" and add it.
Now in the commnd line run the commnad: "react-native run-ios", and "WALLA" no error.
python.pptx
