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.

+ Recent posts