用react-native-video向React Native添加视频React Native可能是目前使用最广泛的混

React Native可能是目前使用最广泛的混合应用程序框架，因为它使开发人员能够通过编写React代码来创建原生应用程序，这在网站和应用程序之间提供了类似的开发人员体验。创建应用程序从未如此简单。

但这是否意味着你可以通过将所有React代码复制到React Native应用中，直接将你的网站变成一个应用？不，不幸的是，这不是那么简单。即使React Native应用的代码看起来与用React编写的网络应用的代码相似，但还是有一些微小但关键的区别。

与网站和浏览器相比，移动应用程序有许多原生界面和功能。虽然React Native应用被编译成iOS或Android的原生应用，但一些简单元素的实现与我们在React的网页版中看到的不同。例如，<div> 变成<view> ，<p> 变成<text> ，等等。

这使得React Native与所有基于Cordova的混合应用框架不同。但是，听起来是一个主要的缺点，实际上使应用程序有可能编译成本地代码，而不是模拟的网络视图。

与原生网络元素不同的一个元素是视频。在HTML和网络的世界里，观看视频就像使用本地HTML元素<video>。

在应用程序的背景下，实现视频并不像在网络上那样容易。好在React Native社区已经为这个问题开发了非常流行的解决方案。

这篇文章强调了最常见的包，react-native-video，用于在你的React Native应用中使用视频。你还会学到如何在你的React Native应用中实现它。

前提条件

由于安装和使用可能因你开发的设备而不同，我们将专注于iOS版本，并在基于Mac的开发者环境中开发所有的例子。

为各种类型的设备或平台（如Android）进行开发是类似的，但你需要注意的差异在软件包的文档中会有非常详细的描述。

什么是react-native-video？

截至目前，在使用最广泛的软件包react-native-video之外，还没有真正的替代品。

虽然我喜欢比较不同的包，但这在这里没有意义，所以我们只强调这个库的用法、优点和缺点，然后学习如何使用它。react-native-video包的大小为500kB，可以在React Native世界的所有设备上使用。

安装该包

在你使用这个库之前，你必须在你项目的根目录下安装这个包。

npm install --save react-native-video

如果你在Mac上运行你的本地React应用程序，你还必须运行以下命令。

npx pod-install

对于其他环境和应用环境，请参考你所在平台的官方安装指南。

使用 react-native-video

在我解释如何使用这个包之前，让我们先举个例子说明我们想用它来实现什么。视频在应用程序中的一个常见用例是动态背景，这就是我们的应用程序在登录屏幕中想要实现的。

它看起来应该是这样的。

首先，我们将视频组件从库中导入到我们想要显示视频的组件中。

当然，为了使视频组件能够显示任何东西，我们需要一个视频文件。这可以是你项目中的一个文件，也可以是一个外部资源的链接。

现在，让我们把一切放在一起。

import Video from 'react-native-video';
import video from '../test-video.mp4';

const MyComponent = () => {
    return (
        <Video  
            source={video}                  // the video file
            paused={false}                  // make it start    
            style={styles.backgroundVideo}  // any style you want
            repeat={true}                   // make it a loop
        />
    )
}

正如你所看到的，我们把从我们的项目中导入的视频文件直接传给了该组件。如果你喜欢一个外部视频文件的链接，你也可以使用源道具，像这样。

<Video  
    source={{ url: 'http://link-to-your-video.mp4'}}
    ...
/>

为了实现背景视频的外观，我们还向组件传递了一些React Native风格。此外，我们将道具pause 设置为false ，这告诉组件紧接着开始播放视频。我们还将道具repeat 设置为true ，使视频循环播放。

在react-native-video中使用的其他组件道具

我们只用了该组件的四个道具，就很快实现了我们的用例。然而，还有很多方法可以使用道具。你可以查看文档以看到完整的列表，但让我向你展示一些我认为非常有用的选择。

`[allowsExternalPlayback](https://github.com/react-native-video/react-native-video#allowsexternalplayback)`

这个道具允许视频由外部资源控制，如AirPlay或HDMI，但这只在iOS上可用。

`[playInBackground](https://github.com/react-native-video/react-native-video#playinbackground)`

使用这个选项来指定当应用程序被关闭时，视频是否应该继续播放。当然，只有音频会继续播放，但对于某些用例来说，即使应用程序已经关闭，保持视频播放也是有帮助的。

`[poster](https://github.com/react-native-video/react-native-video#poster)`

这个道具创建了一个图像，在视频正在加载或尚未开始时显示，例如通常在YouTube上看到的缩略图。此外，你可以通过以下方式调整图像 [posterResizeMode](https://github.com/react-native-video/react-native-video#posterresizemode).

`[controls](https://github.com/react-native-video/react-native-video#controls)`

在我们上面的例子中，我们不想显示视频的控件，因为它只是在后台运行，这是该组件的默认行为。如果你想让用户控制视频，你可以简单地把controls 设为true ，控件就会自动显示。

注意：在iOS上，即使这个标志被设置为false，控件也会以全屏模式显示。

创建外部视频控件

该组件还提供了你从外部控制视频所需的一切，因此可以创建你自己独特的用户界面来控制它。

这些属性包括 [paused](https://github.com/react-native-video/react-native-video#paused), [muted](https://github.com/react-native-video/react-native-video#muted), [volume](https://github.com/react-native-video/react-native-video#volume), [onprogress](//github.com/react-native-video/react-native-video#onprogress), , 或 [rate](https://github.com/react-native-video/react-native-video#rate)是你可以使用React状态定制的道具，你可以让任何其他元素控制它们。下面是一个简单的例子，说明我的意思。

function Home(props) {  
    const [isPlaying, setIsPlaying] = React.useState(false);  
    const [isMuted, setIsMuted] = React.useState(false);  

    const togglePlaying = () => {};  

    return (  
        <View>  
            <Video
                source={video}  
                paused={!isPlaying}  
                controls={true}  
                style={styles.backgroundVideo}  
                muted={isMuted}  
            />  
            <Button
                onPress={() => setIsPlaying(p => !p)}  
                title={isPlaying ? 'Stop' : 'Play'}  
            />  
            <Button
                onPress={() => setIsMuted(m => !m)}  
                title={isMuted ? 'Unmute' : 'Mute'}  
            />  
        </View> 
    );  
}

正如你所看到的，通过一个简单的状态和使用按钮，我们可以以我们想要的方式控制视频，这使我们有能力拥有一个完全自定义的视频用户界面。

在视频元素中调用方法

你也可以在视频元素中调用一些方法来对其进行更多的控制，比如使用像save ，将视频保存到你的设备照片中，或者控制视频的全屏模式。

为了实现这一点，你需要创建一个对videoPlayer 的引用，并将其存储在例如useRef 。

import Video from 'react-native-video';
import video from '../test-video.mp4';

const MyComponent = () => {
    const videoPlayer = React.useRef();

    const goFullScreen = () => {  
        if (videoPlayer.current) {  
            videoPlayer.current.presentFullscreenPlayer();  
        }  
    };

    return (
        <Video  
            ref={ref => (videoPlayer.current = ref)}
            source={video}                  // the video file
            paused={false}                  // make it start    
            style={styles.backgroundVideo}  // any style you want
            repeat={true}                   // make it a loop
        />
    )
}

结论

React Native是一个强大的工具，因为它提供了使用React编写应用程序的可能性，这与网络上使用的非常相似。

唯一的区别是，我们不写HTML元素。然而，我们确实包括本地元素。其中一些元素已经包含在框架中，但像视频这样的元素也必须安装。

虽然视频的行为与网页类似，但开发者需要考虑构建一些功能，如全屏模式或应用最小化时恢复播放的选项。

React-native-video库为你提供了所有这些选项，这样你就可以轻松地将视频添加到你的应用中并进行定制，确保你的用户在你的应用中观看视频时有一个很好的体验!

The postAdding videos to React Native with react-native-videoappeared first onLogRocket Blog.