React Native可能是当今使用最广泛的混合APP框架，因为它使开发人员能够通过编写React代码来创建原生APP，使开发人员在网站和APP端提供类似的体验，使创建APP变得非常简单。
但这是否意味着你可以通过将所有 React 代码复制到 React Native APP 使网站变成APP呢？不幸的是，事情没那么简单。尽管 React Native APP的代码看起来与用 React 编写的 Web APP的代码相似，但还是存在一些关键的微小差异。
与网站和浏览器相比，移动APP具有许多原生界面和功能。虽然 React Native APP的开发适用于 iOS 或 Android 的原生APP，但一些简单元素的实现与我们在 Web 版本的 React 中看到的不同。例如，<div> 变成<view> 、<p> 变成<text> 等等。
这使得 React Native 不同于所有基于 Cordova 的混合APP框架。但是，这听起来像是个漏洞，实际上它使APP可以编译为本机代码而不是模拟的 Web 视图。
与原生 Web 元素不同的是视频。在 HTML 和网络的世界中，观看视频就像使用原生HTML 元素<video> 一样简单。
在APP内容中，实现视频并不像在 Web 上那样容易。好消息是 React Native 社区已经针对这个问题开发了非常受欢迎的解决方案。
本文重点介绍了最常见的包 react-native-video，用于在 React Native APP中使用视频，你还将学习如何在 React Native APP中实现它。
要求
由于安装和使用可能因开发的设备而异，因此我们将重点关注 iOS 版本并在基于 Mac 的开发人员环境中为所有示例开发APP。
针对各种类型的设备或平台（例如，Android）开发步骤是相似的，需要注意的事项在软件包的文档中已经进行了详细描述。
什么是 react-native-video？
在撰写本文时，使用最广泛的包——react-native-video仍无可替代。
虽然我很喜欢比较不同的包，但在这里没有意义，所以我们只强调库的用法、优点和缺点，然后学习如何使用它。react-native-video 包大小为 500kB，可以在 React Native 领域的所有设备上使用。
安装包
在使用库之前，你必须在项目的根目录中安装包：
npm install --save react-native-video
如果你在 Mac 上运行原生 React APP，你还需运行以下命令：
npx pod-install
其他环境和应用环境可参考平台官方安装指南。
使用 react-native-video
在我解释如何使用这个包之前，让我们从一个想要用它实现的例子开始。APP视频的一个常见用例是动态背景，这是我们希望在登录APP时屏幕显示的效果。
具体如下：
首先，我们将库中的视频组件导入到我们想要显示视频的组件中。
当然，要让视频组件显示所有内容，我们需要一个视频文件。这可以是项目中的文件，也可以是指向外部资源的链接。
现在，进行各项组合：
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
/>
)
}
如你所见，我们已将项目中导入的视频文件直接传递给组件。如果你更喜欢外部视频文件的链接，你还可以使用 source 属性，如下所示：
<Video
source={{ url: 'http://link-to-your-video.mp4'}}
...
/>
为了实现背景视频的外观，我们还向组件传递了一些 React Native 样式。此外，我们将 prop pause 设置为false ，它告诉组件立即开始播放视频。我们还将道具proprepeat 设置为true ，使视频循环。
在 react-native-video 中使用的其他组件道具
我们只使用了组件的四个 props，很快就实现了我们的用例。但是，还有更多使用道具的方法。你可以查看文档以浏览完整列表，但我想给你推荐一些我认为非常有用的方法。
allowsExternalPlayback
此道具允许视频由外部资源控制，例如 AirPlay 或 HDMI，但这仅在 iOS 上可用。
playInBackground
使用此选项可指定在APP关闭时是否继续播放视频。当然，只有音频会继续播放，但对于某些情况，即使APP已关闭，但仍能保持视频播放。
poster
这个道具创建了一个在视频加载或尚未开始时显示的图像，例如通常在 YouTube 上看到的缩略图。此外，你可以使用posterResizeMode 调整图像。
controls
在上面的示例中，我们不想显示视频的控件，因为它只是在后台运行，这是组件的默认行为。如果要允许用户控制视频，只需将controls 设置为true ，控件将自动显示。
注意：在 iOS 上，即使此标志设置为 false，控件也会以全屏模式显示。
创建外部视频控件
该组件还提供了从外部控制视频所需的一切，因此可以创建自己独特的用户界面来控制它。
像paused , muted , volume , onprogress , 或者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>
);
}
如你所见，通过简单的状态和使用按钮，我们可以按照我们想要的方式控制视频，这使我们能够拥有自定义视频UI的能力。
在视频元素中调用方法
你还可以调用一些视频元素中的方法来对其进行更多控制，例如使用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 编写APP的可能性，这与 Web 非常相似。
唯一的区别是我们不编写 HTML 元素。但是，我们确实包含本地元素，其中一些元素已包含在框架中，还必须安装视频等元素。
尽管开发视频的操作与网络端相似，但开发人员需要考虑创建全屏模式或在APP最小化时恢复播放的选项等功能。
react-native-video 库为你提供了所有这些选项，以便你可以轻松地将视频添加到APP并对其进行自定义，确保用户在你的APP上观看视频时拥有出色的体验！
原文作者 Lorenz Weiß
原文链接 https://blog.logrocket.com/adding-videos-react-native-react-native-video/
