添加视频页面，目前只做了推荐视频列表（无上拉加载）

由于RN升级的40版本，react-native-video不可用（而且也是基于AVFoundation的），现在考虑集成自定义页面（使用ijkplayer）

App/Model/VideoModel.js

@@ -0,0 +1,81 @@
+/**
+ * Created by jiangzhenhua on 2017/1/6.
+ */
+import {cancellableFetch, parseJSON} from "../Util/NetworkUtil";
+
+const URL = "http://v.163.com/special/video_tuijian/?callback=callback_video";
+
+export class VideoCommentModel {
+ constructor(obj){
+ this.against = obj.against;
+ this.boardId = obj.boardId;
+ this.channelId = obj.channelId;
+ this.cmtAgainst = obj.cmtAgainst;
+ this.cmtVote = obj.cmtVote;
+ this.createTime = obj.createTime;
+ this.docId = obj.docId;
+ this.isAudit = obj.isAudit;
+ this.modifyTime = obj.modifyTime;
+ this.rcount = obj.rcount;
+ this.tcount = obj.tcount;
+ this.title = obj.title;
+ this.url = obj.url;
+ this.vote = obj.vote;
+ }
+}
+
+export class VideoVoteModel {
+ constructor(obj) {
+ this.hits = obj.hits;
+ this.id = obj.id;
+ this.opposecount = obj.opposecount;
+ this.vid = obj.vid;
+ }
+}
+
+export class VideoModel {
+ constructor(obj) {
+ this.comment = new VideoCommentModel(obj.comment);
+ this.img = obj.img;
+ this.sname = obj.sname;
+ this.title = obj.title;
+ this.url = obj.url;
+ this.vid = obj.vid;
+ }
+}
+
+export function getVideoList() {
+ return cancellableFetch(fetch(URL, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'text/html;',
+ }
+ }), 30000)
+ .then((response)=>{
+ if (response.ok) {
+ return parseJSON(response);
+ } else {
+ return {};
+ }
+ })
+ .then((responseData)=>{
+ if (Object.keys(responseData).length === 0) {//返回数据为空
+ throw "视频列表返回数据为空！";
+ } else {
+ for (let key in responseData) {
+ return responseData[key];
+ }
+ }
+ })
+ .then((list)=>{
+ let tmpArr = [];
+ for(let dic of list) {
+ let model = new VideoModel(dic);
+ tmpArr.push(model);
+ }
+ return tmpArr;
+ })
+ .catch((error) => {
+ throw error.toString();
+ });
+}

App/Util/NetworkUtil.js

@@ -30,9 +30,25 @@ export function parseJSON(response) {
  if (response.ok) {
  return response.text()
  .then(function (text) {
- return text ? JSON.parse(text) : {}
+ if(text){
+ let obj = {};
+ try {
+ obj = JSON.parse(text);
+ } catch(e) {
+ obj = processInvalidJSONText(text);
+ }
+ return obj;
+ } else {
+ return {}
+ }
  })
  } else {
  return {}
  }
+}
+
+function processInvalidJSONText(text) {
+ let newText = text.replace('callback_video(','');
+ newText = newText.replace(/\)/g,'');
+ return JSON.parse(newText);
 }

App/Views/VideoPage.js

@@ -0,0 +1,213 @@
+/**
+ * Created by jiangzhenhua on 2017/1/6.
+ */
+import React from "react";
+import {
+ StyleSheet,
+ Text,
+ View,
+ TouchableOpacity,
+ ListView,
+ Image,
+ RecyclerViewBackedScrollView,
+ RefreshControl,
+ Navigator,
+ ScrollView,
+ ActivityIndicator,
+ TouchableWithoutFeedback,
+ Modal,
+ Animated,
+ InteractionManager,
+ Dimensions
+} from "react-native";
+
+const screenWidth = Dimensions.get('window').width;
+
+import {VideoModel, getVideoList} from '../Model/VideoModel'
+
+export default class VideoPage extends React.Component {
+
+ constructor(props){
+ super(props);
+ const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+ this.state = {
+ dataSource:ds,
+ isLoading:true
+ }
+ this.renderItem = this.renderItem.bind(this);
+ this.source = null;
+ }
+
+ componentDidMount(){
+ InteractionManager.runAfterInteractions(()=>{
+ getVideoList()
+ .then((dataList)=>{
+ this.source = dataList;
+ this.setState({
+ dataSource:this.state.dataSource.cloneWithRows(dataList),
+ isLoading:false
+ })
+ })
+ .catch((e)=>{
+ console.log(e);
+ })
+ })
+ }
+
+ //下拉刷新
+ onRefresh(label) {
+
+ }
+
+ renderItem(video:VideoModel){
+ return(
+ <TouchableOpacity
+ onPress={()=>{
+ console.log(video.url);
+ }}
+ style={styles.cellStyle}>
+ <Image
+ style={styles.cellImg}
+ source={{uri:video.img}}
+ resizeMode={'stretch'}
+ >
+ <Image
+ resizeMode={'center'}
+ source={require('../Img/play_btn.png')}
+ />
+ <Text style={styles.cellText}>
+ {video.title}
+ </Text>
+ <View style={{flexDirection:'row',justifyContent:'space-between', marginLeft:15, marginBottom:10, width:screenWidth - 20, flexShrink:1}}>
+ <Text style={{marginTop:8, backgroundColor:'transparent', color:'rgba(135,135,135,1)'}}>
+ {video.sname}
+ </Text>
+ <Text style={{marginTop:8, backgroundColor:'transparent', color:'rgba(135,135,135,1)', marginRight:30 + 20}}>
+ {video.comment.vote}
+ </Text>
+ </View>
+ </Image>
+ </TouchableOpacity>
+ )
+ }
+
+ textReminder(isLoading) {
+ let text = "";
+ if (!isLoading) {
+ text = "目前没有数据，请下拉刷新";
+ }
+ return (
+ <Text style={{ fontSize: 16, color:'white' }}>
+ {text}
+ </Text>);
+ }
+
+ render(){
+ return this.source ?
+ (
+ <ListView
+ initialListSize={1}
+ dataSource={this.state.dataSource}
+ style={styles.listView}
+ renderRow={this.renderItem}
+ enableEmptySections={true}
+ renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
+ refreshControl={
+ <RefreshControl
+ style={styles.refreshControlBase}
+ refreshing={false}
+ onRefresh={() => {
+ this.onRefresh()
+ }}
+ title="刷新中，请稍后..."
+ colors={['#ffaa66cc', '#ff00ddff', '#ffffbb33', '#ffff4444']}
+ />
+ }
+ />
+ )
+ :
+ (
+ <View style={styles.container}>
+ <ScrollView
+ automaticallyAdjustContentInsets={false}
+ horizontal={false}
+ contentContainerStyle={styles.no_data}
+ style={styles.base}
+ refreshControl={
+ <RefreshControl
+ style={styles.refreshControlBase}
+ refreshing={this.state.isLoading}
+ onRefresh={() => {
+ this.onRefresh(this.state.isLoading)
+ }}
+ title="刷新中，请稍后……"
+ colors={['#ffaa66cc', '#ff00ddff', '#ffffbb33', '#ffff4444']}
+ />
+ }
+ >
+ <View style={{ alignItems: 'center',backgroundColor:'#D3D3D3' }}>
+ {this.textReminder(this.state.isLoading)}
+ <Image
+ source={require('../Img/[email protected]')}
+ >
+ </Image>
+ </View>
+ </ScrollView>
+ </View>
+ );
+ };
+}
+
+const styles = StyleSheet.create({
+
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent:'center',
+ alignItems:'center'
+ },
+
+ refreshControlBase: {
+ backgroundColor: 'transparent'
+ },
+
+ base: {
+ flex: 1,
+ backgroundColor: '#D3D3D3'
+ },
+
+ listView: {
+ backgroundColor: '#eeeeec'
+ },
+
+ no_data: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingBottom: 100
+ },
+
+ cellStyle:{
+ height:240,
+ flexDirection:'column',
+ backgroundColor:'#eeeeec',
+ justifyContent:'center',
+ paddingVertical:10
+ },
+
+ cellImg:{
+ flex:1,
+ marginHorizontal:18,
+ flexDirection:'column',
+ justifyContent:'flex-end',
+ alignItems:'flex-start'
+ },
+ cellText:{
+ backgroundColor:'transparent',
+ color:'white',
+ marginLeft:15,
+ fontSize:17,
+ fontWeight:'bold'
+ }
+});
+

index.ios.js

@@ -25,6 +25,7 @@ const icons = [
 
 import ControlPanel from './App/Views/DrawerContent'
 import Drawer from 'react-native-drawer'
+import VideoPage from './App/Views/VideoPage'
 
 class news extends React.Component {
 
@@ -102,9 +103,7 @@ class news extends React.Component {
  <View style={styles.content} tabLabel='key2'>
  <Text>#2</Text>
  </View>
- <View style={styles.content} tabLabel='key3'>
- <Text>#3</Text>
- </View>
+ <VideoPage tabLabel='key3'/>
  <View style={styles.content} tabLabel='key4'>
  <Text>#4</Text>
  </View>