Question

我正在尝试将视频合并到GetStreamIO的固定供稿中。我当前的方法是，如果帖子具有视频链接，则将video element from Expo嵌入到Activity UI组件的内容主体中。仅从Youtube链接开始。我遇到一个问题，当嵌套在props.activity.attachments中时，无法选择视频URL。由于某种原因，如果不将值转换为JSON，就无法直接访问video数组中的对象。我引用了this StackOverflow Post作为JSON解决方法。

我的代码，用于检查附件是否包含视频网址，如果有，则抓取

 const LikeActivity = (props) => {
  if (props.activity.attachments != undefined) {
    console.log(props.activity.attachments)
    console.log(fetchFromObject(props.activity.attachments, "og"))
    var og = fetchFromObject(props.activity.attachments, "og")
    var videos = fetchFromObject(og, "videos")
    console.log(og)
 // Can get the og object but cannot pull video url from it. 

  }
  return (
    <Activity
      {...props}
      Footer={
        <View>

// For Now just putting this here to see the video element render. Need to pass URI from Post to element eventually.               
 <Video
      source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      rate={1.0}
      volume={1.0}
      isMuted={false}
      resizeMode="cover"
      shouldPlay
      isLooping
      style={{ width: 300, height: 300 }}
    />
            <LikeButton {...props} />
            </View>
          }
        />
      );
    };

我的应用实施

<StreamApp
      apiKey="XXXX"
      appId="XXXX"
      token="XXXXXX"
  >

<FlatFeed
  feedGroup="timeline"
  userId="user-one"
  Activity={LikeActivity}
/>

</StreamApp>

从对象获取方法

  function fetchFromObject(obj, prop) {

  if(typeof obj === 'undefined') {
      return false;
  }

  var _index = prop.indexOf('.')
  if(_index > -1) {
      return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
  }

  return obj[prop];
}

提要由许多帖子组成，并且props.activity.attachments在运行时具有以下值。当前每个带有链接的帖子都有一个丰富的摘要。附件值还可以识别视频与图像。我还提供了供稿here的图像作为参考。

Object {
  "og": Object {
    "description": "Why choose one when you can wear both? These energizing pairings stand out from the crowd",
    "images": Array [
      Object {
        "image": "https://www.rollingstone.com/wp-content/uploads/2018/08/GettyImages-1020376858.jpg",
      },
    ],
    "title": "'Queen' rapper rescheduling dates to 2019 after deciding to &#8220;reevaluate elements of production on the 'NickiHndrxx Tour'",
    "url": "https://www.rollingstone.com/music/music-news/nicki-minaj-cancels-north-american-tour-with-future-714315/",
  },
}
undefined
Object {
  "og": Object {
    "description": "Why choose one when you can wear both? These energizing pairings stand out from the crowd",
    "images": Array [
      Object {
        "image": "https://images.wsj.net/im-21927/TOP",
      },
    ],
    "title": "How to Pair Neutrals and Bright Colors",
    "url": "https://graphics.wsj.com/glider/marketreport-4a039902-7e0d-4631-ab83-6cc1931c1bc6",
  },
}
undefined
Object {
  "og": Object {
    "description": "Serial entrepreneur Elon Musk wants to fundamentally change the way we live. But his path to success has been characterized by both great accomplishments and flirtations with failure.",
    "images": Array [
      Object {
        "image": "https://static01.nyt.com/images/2018/08/22/us/19xp-musk-vid-2/19xp-musk-vid-2-videoSixteenByNine1050.jpg",
      },
    ],
    "title": "Elon Musk’s Highs and Lows: PayPal, SpaceX, Tesla",
    "url": "https://www.nytimes.com/video/business/100000006060092/elon-musk-tesla-spacex.html",
  },
}
undefined
Object {
  "og": Object {
    "description": "We are in a Simulation - Elon Musk",
    "images": Array [],
    "site_name": "YouTube",
    "title": "We are in a Simulation - Elon Musk",
    "type": "video.other",
    "url": "https://www.youtube.com/watch?v=xBKRuI2zHp0",
    "videos": Array [
      Object {
        "height": "360",
        "secure_url": "https://www.youtube.com/embed/xBKRuI2zHp0",
        "type": "text/html",
        "width": "640",
      },
    ],
  },
}
Array [
  Object {
    "height": "360",
    "secure_url": "https://www.youtube.com/embed/xBKRuI2zHp0",
    "type": "text/html",
    "width": "640",
  },
]
Object {
  "images": Array [
    "https://cdn.vox-cdn.com/thumbor/OBDFDT9j-nHEpGLckE4u5ibX2qU=/1400x1400/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/13589869/edu_distance_to_the_moon.png",
    "https://www.jpl.nasa.gov/images/mars/20170622/PIA01466-16.jpg",
    "http://cdn.sci-news.com/images/enlarge4/image_5608_2e-Jupiter.jpg",
    "https://d2r55xnwy6nx47.cloudfront.net/uploads/2018/07/SolarFull_SeanDoran_2880FullwidthLede-2880x1620.jpg",
  ],
}

无法在React Native [GetStream.io]中将视频添加到FlatFeed中

0 个答案: