增加评论输入框

pages/CourseDetails.js

@@ -26,18 +26,22 @@ import courseDetails from './services/courseDetails'
 export default class CourseDetails extends Component {
   componentDidMount() {
     const { courseId } = this.props.navigation.state.params;
-    console.log(courseId)
     courseDetails.getCourseDetails(courseId).success(res => {
       console.log('列表',res.data)
+      const courseList = res.data.course;
+      const wareList = res.data.wareList;
       this.setState({
-        courseList: 222
+        courseList,
+        wareList
       })
     });
   }
   state = {
     fullStyle: {},
     lefts: 0,
-    courseList: 111
+    courseList: {},
+    wareList: {},
+    uri: 'http://chimee.org/vod/1.mp4'
   }
   render() {
     return (
@@ -46,16 +50,15 @@ export default class CourseDetails extends Component {
           <View>
             <VideoExplain 
             full={this.full.bind(this)}
-            title={'同步辅导语文一年级下册'}
-            details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-            uri={'http://chimee.org/vod/1.mp4'}
+            uri={ this.state.uri }
             dataList={ this.state.courseList }
+            ref={view => (this.video = view)} //设置ID
             videoback={this.back.bind(this) } 
             />
           </View>
           <View style={ this.state.fullStyle }>
-            <CourseListRow title={'课件'}></CourseListRow>
-            <CourseListLine title={'课件'}></CourseListLine>
+            <CourseListRow title={'课件'} wareList={ this.state.wareList} changeUri={ this.changeUri.bind(this) }></CourseListRow>
+            {/* <CourseListLine title={'课件'} wareList={ this.state.wareList}></CourseListLine> */}
             <Comment title={ '全部评论' }></Comment>
           </View> 
         </ScrollView>
@@ -84,6 +87,14 @@ export default class CourseDetails extends Component {
     }
 
   }
+  changeUri(uri) {
+    console.log(uri)
+    this.setState({
+      uri
+    })
+    // 开始播放
+    this.video.start();
+  }
 }
 
 const styles = StyleSheet.create({

pages/components/Comment.js

@@ -3,19 +3,31 @@ import {
   StyleSheet,
   Text,
   View,
-  Image
+  Image,
+  TextInput,
+  TouchableOpacity
 } from "react-native";
 
 export default class Comment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      text: '',
+      input: false,
+      default: '写评论'
+    };
+  }
   render() {
     return (
       <View style={styles.courseComment}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <View style={[ styles.button, styles.center ]}>
-            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
-            <Text>写评论</Text>
-          </View>
+          <TouchableOpacity onPress={() => this.comments()}>
+            <View style={[ styles.button, styles.center ]}>
+              <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
+              <Text>写评论</Text>
+            </View>
+          </TouchableOpacity>
         </View>
         <View style={[ styles.padding ]}>
           <View style={[ styles.title ]}>
@@ -39,9 +51,31 @@ export default class Comment extends Component {
             <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
           </View>
         </View>
+        {
+            this.state.input ?
+            <View style={[ styles.input, this.state.fullStyle]}>
+            <TextInput
+              style={{height: '100%', borderColor: '#DFDFDF', borderWidth: 1, width: '90%', backgroundColor: '#fff', borderRadius: 6, padding: 0, textAlignVertical: 'top', padding: 10}}
+              onChangeText={(text) => this.setState({text})}
+              value={this.state.text}
+              numberOfLines={7}
+              multiline = {true}
+              autoFocus = {true}
+              defaultValue= {this.state.default}
+            />
+            <Text style={{ color: '#58A8FA', fontSize: 18}}>发送</Text>
+          </View>
+          :
+          null
+        }
       </View>
     );
   }
+  comments() {
+    this.setState({
+      input: true
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -90,8 +124,8 @@ const styles = StyleSheet.create({
     borderRadius: 40
   },
   iconSize: {
-    width: 18,
-    height: 18,
+    width: 20,
+    height: 20,
     marginRight: 10
   },
   reply: {
@@ -110,5 +144,18 @@ const styles = StyleSheet.create({
   },
   color: {
     color: '#518AD1'
+  },
+  input: {
+    width: '100%',
+    height: 124,
+    backgroundColor: '#F9F9F9',
+    paddingLeft: 18,
+    paddingTop: 18,
+    paddingBottom: 18,
+    paddingRight: 24,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end'
   }
 });

pages/components/CourseListRow.js

@@ -21,13 +21,13 @@ export default class CourseListRow extends Component {
       <View style={styles.courseList}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <Text style={styles.color}>共28课</Text>
+          <Text style={styles.color}>共{this.props.wareList.length}课</Text>
         </View>
         <View style={{
             flex: 1,
             height: 200,
           }}>
-            <ScrollRow itemWidth={106} itemHeight={150} />
+            <ScrollRow itemWidth={106} itemHeight={150} data={this.props.wareList} type={ true } changeUri={ this.props.changeUri }/>
           </View>
       </View>
     );

pages/components/ScrollRow.js

@@ -24,7 +24,6 @@ export default class ScrollRow extends Component {
     render() {
         return (
             <FlatList
-
                 data={this.props.data}
                 horizontal={true}
                 renderItem={({ item, separators }) => this.renderItem(item, separators)}
@@ -33,7 +32,6 @@ export default class ScrollRow extends Component {
     }
 
     renderItem(item, separators) {
-        console.log(this.toNextPage)
         const courseId = item.course ? item.course.id : item.operationContent;
         return (
             <TouchableOpacity
@@ -45,7 +43,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => this.props.nav('CourseDetails', {courseId})}
+                onPress={() => this.playOrGoback(courseId, item.playUrl)}
                 activeOpacity={1}
             >
                 <View style={{
@@ -57,7 +55,7 @@ export default class ScrollRow extends Component {
                 }}>
                     <Image
                         source={{
-                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.boothContent
+                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.iconImg ? item.iconImg : item.boothContent
                             // uri: item.icon
                         }}
                         style={{
@@ -73,6 +71,12 @@ export default class ScrollRow extends Component {
                             {item.summary}
                         </Text>
                         :
+                        item.title
+                        ?
+                        <Text style={styles.itemSummary}>
+                            {item.title}
+                        </Text>
+                        :
                         null
                     }
 
@@ -81,6 +85,13 @@ export default class ScrollRow extends Component {
             </TouchableOpacity>
         )
     }
+    playOrGoback(courseId, playUrl) {
+        if (this.props.type) {
+            this.props.changeUri(playUrl)
+        } else {
+            this.props.nav('CourseDetails', {courseId})
+        }
+    }
 }
 
 const styles = StyleSheet.create({

pages/components/VideoExplain.js

@@ -25,11 +25,6 @@ import { Dimensions } from 'react-native'
 const { height, width } =  Dimensions.get('window');
 
 export default class VideoExplain extends Component {
-  static propTypes = {
-    // uri: PropTypes.string,
-    // title: PropTypes.string,
-    // details: PropTypes.string,
-  };
   state = {
     isFull: false,
     video_height: 210,
@@ -38,7 +33,8 @@ export default class VideoExplain extends Component {
       width: "100%"
     },
     collectImage: require('../images/courseDetails/collect.png'),
-    isCollect: true
+    isCollect: true,
+    numberLine: 2
   };
 
   render() {
@@ -68,7 +64,7 @@ export default class VideoExplain extends Component {
         />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
-            <Text style={styles.font}>{this.props.dataList}</Text>
+            <Text style={styles.font}>{this.props.dataList.title}</Text>
             <View style={styles.icon}>
               <TouchableOpacity onPress={this.collection.bind(this)}>
                 <Image source={this.state.collectImage} style={styles.iconSize} />
@@ -80,9 +76,9 @@ export default class VideoExplain extends Component {
           </View>
           <View style={[styles.title, styles.tops]}>
             <Text style={styles.font}>课程介绍：</Text>
-            <Text style={styles.clor}>更多 ></Text>
+            <Text style={styles.clor} onPress={() => this.open()}>更多 ></Text>
           </View>
-          <Text style={styles.clor}>{this.props.details}</Text>
+          <Text style={[ styles.clor, styles.introduce]} numberOfLines={this.state.numberLine}>{this.props.dataList.description}</Text>
         </View>
       </View>
     );
@@ -125,6 +121,9 @@ export default class VideoExplain extends Component {
   back(){
     this.props.videoback();
   }
+  start(){
+    this.video.start();
+  }
   componentWillMount() {
     this.backlistener=BackHandler.addEventListener(
       "hardwareBackPress",
@@ -167,6 +166,12 @@ export default class VideoExplain extends Component {
   share() {
     alert('点击分享')
   }
+  // 点击更多展开说明
+  open() {
+    this.setState({
+      numberLine: 10
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -205,5 +210,8 @@ const styles = StyleSheet.create({
   },
   tops: {
     marginTop: 18
+  },
+  introduce: {
+    marginTop: 5
   }
 });