开发一个基于React Native的简易demo--视频组件+布局

一、视频组件

• 这里用：react-native-video，详见官网：https://github.com/react-native-community/react-native-video

• 添加组件

yarn add --save react-native-video
react-native link

我很幸运，两个命令都成功了，如果link不成功，跟着这篇文章：https://www.npmjs.com/package/react-native-video

• 编码

import Video from 'react-native-video';
...
<Video ref="myvideo" 
                          source={
  {
  uri:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}}
                          style={
  {
  width:width,height:180, top: 0, left: 0, bottom: 0, right: 0,}}
                          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 

官网都讲解的挺详细的，具体还是看官网吧！

二、样式布局
react-native的布局常用的有4个：flexDirection、justifyContent、flex、alignItems，其中flex最简单，就是代表所占的比例，比如有两个，上下排列，其中一个flex:1，另一个flex:2, 则两者在一个屏幕里面的比例是1:2，第一个占了1/(1+2)个屏幕，第二个占了2/(1+2)，如果两者都是flex:1，则它们所占的面积相等。其它3个布局有点复杂，看下图的说明：

这里还有一点，我是直接把View理解为div的，所以我们的首页布局，可以设计成如下：

首页是由轮播图在顶部，大约占1/4，下面是循环的用户内容，每个内容看成一个整体，我把它定为一个类叫做：，这个的布局分为4部分，第一部分是最上面用户信息部分，第二是视频部分，第三是点赞、评论、分享，第4部分是前3条评论，每个部分都有黑色的底部边界。

类如下，忽略视频部分，可以用图片代替：

  class COLL extends Component{
      constructor(props){
        super(props);
        this.state = { detailTitle:'aaaa'};
      }
      render(){
        return(
              /*总体的布局，沿着竖轴排列*/
              <View style={
   {
   flexDirection:'