Import Library

此範例以 react-native-video 為例子

下載 在project根目錄下

$ npm install react-native-video -—save 

or

$ yarn add react-native-video

安裝（自動或手動擇一）

link native dependencies for ios/android project

• 自動

  在project根目錄下
  $ react-native link

• 手動 (以iOS為例)

1.使用Xcode開啟專案(.xcodeproj)

2.右鍵點擊Libraries，然後選擇Add Files to ...

3.將 RCTVideo.xcodeproj 檔案加入專案中
ps.RCTVideo.xcodeproj應該位於node_modules/react-native-video/ios 之下

4.還必須在專案的建構程序中加入影片架構
在Build Phases之下的Link Binary With Libraries子選單點擊 ＋ 按鈕，然後將libRCTVideo.a加入專案中
如此就完成了將RCTVideo模組匯入到專案的任務

5.我們還需要匯入mp4影片檔案到我們的Xcode專案中
驗鍵點擊專案並選擇Add Files to IncludeLib，選擇任何mp4檔案應該都可

 加入成功後會如下圖所示

參考

• Linking Libraries - 官方

在此附上此library使用code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 匯入Video元件
import Video from 'react-native-video';


export default class IncludeLib extends Component {
  render() {
    return (
      <View style={styles.backgroundVideo}>
        {/* source 用 url 無法,,,, url是否是在Xcode或者Android Studio裡面才能使用..？ */}
        {/* https://www.npmjs.com/package/react-native-video */}
        <Video source={require('./video/ATC.mp4')}   // Can be a URL or a local file.
           ref={(ref) => {
             this.player = ref
           }}                                      // Store reference
           rate={1.0}                              // 0 is paused, 1 is normal.
           volume={1.0}                            // 0 is muted, 1 is normal.
           muted={false}                           // Mutes the audio entirely.
           paused={false}                          // Pauses playback entirely.
           resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
           repeat={true}                           // Repeat forever.
           playInBackground={false}                // Audio continues to play when app entering background.
           playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
           ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
           progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
           onLoadStart={this.loadStart}            // Callback when video starts to load
           onLoad={this.setDuration}               // Callback when video loads
           onProgress={this.setTime}               // Callback every ~250ms with currentTime
           onEnd={this.onEnd}                      // Callback when playback finishes
           onError={this.videoError}               // Callback when video cannot be loaded
           onBuffer={this.onBuffer}                // Callback when remote video is buffering
           onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
           style={styles.backgroundVideo} />

         <Text style={styles.overlay}>
            Read more: http://bit.ly/makepianostairs
         </Text>
       </View>
    );
  }
}

const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: '#FFFF00'
  },
  overlay: {
    // opacity: 0,
    position: 'absolute',
    top: 20,
    left: 20,
    height: 100,
    width: 200,
    color: '#FF0000'
  }
});