用react native和expo构建这个简单的视频播放器，讲述一个多部分的故事-第4部分

我们意识到，简单地在每个视频旁边放一个按钮列表会破坏我们想要讲述的故事的流程，因此我们决定以另一种方式使用这些按钮：当观看者到达一个视频的结尾时，她会只需单击一个按钮即可转到下一个“章节”。如果她想重新访问上一个视频，则可以单击另一个按钮以返回。

我们如何最容易地做到这一点？ 好吧，React和React Native的优势之一就是它们如何保存有关要在单个“状态”对象中呈现的内容的信息。 然后，只要状态发生变化，该应用就可以快速轻松地在页面上重新呈现元素。

我们已经使用状态告诉应用程序该视频是应该播放还是暂停，以及声音应该是打开还是静音。

因此，我们添加了“ currentVideo”来声明并使用它来引用我们想要播放的任何视频。 一种简单的方法是将我们所有的视频链接放在一个数组中 

  const VIDEOS = [ 
  'https://s3.amazonaws.com/bostondelhi/onboarding_screen.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V2_edited.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V3_edited.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V4_edited.mp4' 
  ]

并将currentVideo初始设置为等于VIDEOS [0]。 然后，如果我们将视频播放器中的视频源设置为取决于状态 

 来源= {{uri：VIDEOS [this.state.currentVideo]}}

那么第一个索引处的视频会先播放，而哪个视频会随着currentVideo值的更改而更改。

我们如何才能使前进和后退按钮一次一步一步地浏览视频？ 如果我们每次单击前进按钮将currentVideo重置为currentVideo + 1，然后每次单击后退按钮将其设置为currentVideo-1怎么办？

这立即引起了一个问题，即如果我们处于数组的开头或结尾，该怎么办。 那么这些按钮会将我们带到哪里？

我们决定将视频序列循环播放：从最后一个视频开始，我们将直接回到第一个视频，然后从第一个视频开始，我们将“回到”阵列中的最后一个视频。 在代码中，如下所示： 

  forwardButton =（）=> { 
 如果（this.state.currentVideo！= VIDEOS.length-1）{ 
  this.setState（{currentVideo：this.state.currentVideo + 1}）; 
  }其他{ 
  this.setState（{currentVideo：0}）; 
  } 
  } 
  backButton =（）=> { 
 如果（this.state.currentVideo！= 0）{ 
  this.setState（{currentVideo：this.state.currentVideo-1}）; 
  }其他{ 
  this.setState（{currentVideo：VIDEOS.length-1}）; 
  } 
  }

现在我们只需要添加按钮。 我们选择了看起来合适的MaterialIcons（“向前导航”和“向后导航”），并使用flex将它们置于与音量和播放/暂停控件相同的行上。 我们用文字“下一个视频”将它们分开，并且我们认为它们看起来还不错。 在代码中： 

  <View style = {{flex：.25，flexDirection：'row'， 
  alignItems：'center'}}> 
  <MaterialIcons 
  name = {“ navigate-before”} 
 大小= {45} 
  color =“ black” 
  onPress = {this.backButton} 
  /> 
  下一个视频 
  <MaterialIcons 
  name = {“ navigate-next”} 
 大小= {45} 
  color =“ black” 
  onPress = {this.forwardButton} 
  />

这又是现实生活中的样子。 我们简单的讲故事视频播放器完成了！

忽略所有引人入胜的故事片段，以下是使用React Native和Expo自己构建一个简单的讲故事视频播放器的方法：

A.使用手机上的expo获取create-react-native-app：

  1. 在计算机上安装并运行Node和NPM或Yarn。 （谷歌一下！）。
  2. 获取手机上安装的expo应用程序（https://expo.io/）。
  3. 在终端中，导航到要在其中创建应用程序并运行的目录 
  $ npm install -g create-react-native-app 
  $ create-react-native-app我的视频。  ＆nbsp;  //或您的名字 
 您的应用 
  $ cd我的视频 
  $ npm开始 
  ＃对于Mac用户，您可以改为运行它，然后模拟器将打开。 
  $ npm运行ios 
  ＃对于genymotion用户（Linux / Windows），您可以运行以下命令： 
  $ npm运行android

（ 确保您的手机和计算机
在同一个WI-FI网络上
否则下一步将无法工作！）：

5.要在手机上运行该应用程序，请打开expo应用程序，并拍摄刚刚出现在终端中的QR码图片。 

  ＃如果没有QR码出现I. 您可能需要在具有自制软件的Mac上安装watchman（https://facebook.github.io/watchman/docs/install.html）： 
  $ brew更新 
  $ brew install watchman 
 二。  （不太可能）您可能需要更改npm的版本 
  $ npm安装npm@4.6.1

B.获取在您的应用中安装了基本静音和播放控件的视频播放器：

  1. 安装您需要的图标包： 
  $ npm install —保存@ expo / vector-icons

2.以此替换App.js中的代码（感谢Eyal Cohen：https：//medium.com/front-end-hacking/how-to-play-video-with-react-native-and-expo-30523bfcb311 ）： 

 从'react'导入React； 
 从'react-native'导入{StyleSheet，View，Dimensions}; 
 从“ expo”导入{Video}； 
 从'@ expo / vector-icons'导入{MaterialIcons，Octicons}; 
 导出默认类应用扩展了React.Component { 
  render（）{ 
  const {width} = Dimensions.get（'window'）; 
 返回（ 
   
   
   
 反应原生视频 
  <视频 
 来源= {{uri： 
  'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}} 
  shouldPlay = {this.state.shouldPlay} 
  resizeMode =“ cover” 
 样式= {{宽度，高度：300}} 
  isMuted = {this.state.mute} 
  /> 
   
  <MaterialIcons 
 名称= {this.state.mute？  “静音”： 
  “提高音量”} 
 大小= {45} 
  color =“ white” 
  onPress = {this.handleVolume} 
  /> 
  <MaterialIcons 
 名称= {this.state.shouldPlay？  “暂停”： 
  “播放箭头”} 
 大小= {45} 
  color =“ white” 
  onPress = {this.handlePlayAndPause} 
  /> 
   
   
   
  ）; 
  } 
  } 
  const styles = StyleSheet.create（{ 
 容器： { 
 弹性：1， 
  backgroundColor：“＃fff”， 
  alignItems：'中心'， 
  justifyContent：“中心”， 
  }， 
  controlBar：{ 
 位置：“绝对”， 
 底部：0， 
 左：0， 
 右：0， 
 高度：45， 
  flexDirection：'行'， 
  alignItems：'中心'， 
  justifyContent：“中心”， 
  backgroundColor：“ rgba（0，0，0，0.5）”， 
  } 
  }）;

一旦工作，

C.设置播放器以依次播放一系列视频：

  1. 向您要播放的视频文件添加一系列链接，
  2. 将this.state.currentVideo称为视频源，然后
  3. 添加前进和后退按钮以调用将更改state的currentVideo值的函数： 
 从'react'导入React； 
 从'react-导入{按钮，样式表，文本，视图，尺寸} 
 本地人”； 
 从“ expo”导入{Video}； 
 从'@ expo / vector-icons'导入{MaterialIcons，Octicons}; 
 导出默认类应用扩展了React.Component { 
  render（）{ 
  const {width} = Dimensions.get（'window'）; 
  const VIDEOS = [//用您的视频链接替换这些链接 
  'https://s3.amazonaws.com/bostondelhi/onboarding_screen.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V2_edited.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V3_edited.mp4'， 
  'https://s3.amazonaws.com/bostondelhi/V4_edited.mp4' 
  ] 
 导出默认类应用扩展了React.Component { 
 状态= { 
  currentVideo：0， 
 静音：错误， 
  shouldPlay：是的， 
  } 
  handlePlayAndPause =（）=> { 
  this.setState（（prevState）=>（{ 
  shouldPlay：！prevState.shouldPlay 
  }））; 
  } 
  handleVolume =（）=> { 
  this.setState（（prevState）=>（{ 
 静音：！prevState.mute 
  }））; 
  } 
  forwardButton =（）=> { 
 如果（this.state.currentVideo！= VIDEOS.length-1）{ 
  this.setState（{currentVideo：this.state.currentVideo + 1}）; 
  }其他{ 
  this.setState（{currentVideo：0}）; 
  } 
  } 
  backButton =（）=> { 
 如果（this.state.currentVideo！= 0）{ 
  this.setState（{currentVideo：this.state.currentVideo-1}）; 
  }其他{ 
  this.setState（{currentVideo：VIDEOS.length-1}）; 
  } 
  } 
  render（）{ 
  const {width} = Dimensions.get（'window'）; 

 返回（ 
   
   
  <Text style = {{textAlign：'center'，fontSize：18， 
  fontWeight：'bold'}}>德里的日常生活</ Text 
  <视频 
 来源= {{uri：VIDEOS [this.state.currentVideo]}} 
  shouldPlay = {this.state.shouldPlay} 
  resizeMode =“ cover” 
 样式= {{宽度，高度：300}} 
  isMuted = {this.state.mute} 
  /> 
   
  <MaterialIcons 
 名称= {this.state.mute？  “静音”： 
  “提高音量”} 
 大小= {45} 
  color =“ white” 
  onPress = {this.handleVolume} 
  /> 
  <MaterialIcons 
 名称= {this.state.shouldPlay？  “暂停”： 
  “播放箭头”} 
 大小= {45} 
  color =“ white” 
  onPress = {this.handlePlayAndPause} 
  /> 
   
   
  <View style = {{flex：.25，flexDirection：'row'， 
  alignItems：'center'}}> 
  <MaterialIcons 
  name = {“ navigate-before”} 
 大小= {45} 
  color =“ black” 
  onPress = {this.backButton} 
  /> 
  下一个视频 
  <MaterialIcons 
  name = {“ navigate-next”} 
 大小= {45} 
  color =“ black” 
  onPress = {this.forwardButton} 
  /> 
   
   
  ）; 
  } 
  } 
  const styles = StyleSheet.create（{ 
 容器： { 
 弹性：1， 
  backgroundColor：“＃fff”， 
  alignItems：'中心'， 
  justifyContent：“中心”， 
  }， 
  controlBar：{ 
 位置：“绝对”， 
 底部：0， 
 左：0， 
 右：0， 
 高度：45， 
  flexDirection：'行'， 
  alignItems：'中心'， 
  justifyContent：“中心”， 
  backgroundColor：“ rgba（0，0，0，0.5）”， 
  } 
  }）;

瞧！ 您有一个简单的视频播放器，它将逐个视频地前进或后退，并在到达阵列末尾时从另一端再次开始以创建视频循环。

如果愿意，您可以在https://facebook.github.io/react-native/docs/tutorial.html上查看该教程，以获取将应用程序提升到更高水平的方法。

如果您有任何问题或意见，我很想听听他们的意见。 我在LinkedIn上的https://www.linkedin.com/in/kalenhammann/; 我的其他应用程序位于http://github.com/drkalen和http://kalenhammann.com。

喜欢在手机上讲故事！

Related Content

电影级VR是否应该用于讲故事？

INSIGHTS播客系列-＃12：与UrbanClap的Abhiraj Bhal深入探讨筹款活动

超级Bheem节省了一天

给对象麦克风...

美女与野兽如何解释美国政治

More Interesting

告诉真相

认识重要的人。 加里

盲人之地

快进

向杰克·纳普（Jake Knapp）学习：精彩演讲的关键

我会讲你的故事

看战斗说唱如何教会我成为更好的讲故事的人。

01 —期间

数学家

问题是您尽力而为的机会

我7岁那年的非货币化故事

小便Wee Herman效应：现代叙事中的参与和兴趣

魔术子弹信息商业的真正奇迹

非周年纪念日。 （或给自己的便条，作为您的26周年纪念日）

奇特的艺术让您感觉到