增加course8-9.js功能：Touchable*系列组件和ListView

README.md

@@ -16,3 +16,5 @@ Course5 : React Native控件之ProgressViewIOS进度条讲解。
 Course6 : React Native控件之ScrollView组件讲解。
 
 Course7 : React Native控件之Switch与Picker组件讲解以及使用。
+
+Course8 : React Native控件之Touchable*系列组件详解。

view/common/mainview.js

@@ -26,6 +26,8 @@ import Course4 from '../component/course4';
 import Course5 from '../component/course5';
 import Course6 from '../component/course6';
 import Course7 from '../component/course7';
+import Course8 from '../component/course8';
+import Course9 from '../component/course9';
 
 export default class extends Component{
  constructor() {
@@ -39,6 +41,8 @@ export default class extends Component{
       ,{ key:4, title: "ProgressViewIOS", component: Course5, isFA: false, icon: "ios-fastforward", size: 50, color: "#00D204", hideNav: false, }
       ,{ key:5, title: "ScrollView", component: Course6, isFA: false, icon: "ios-sync", size: 50, color: "#777", hideNav: false, }
       ,{ key:6, title: "Switch&PickerIOS", component: Course7, isFA: false, icon: "ios-switch", size: 50, color: "#5e2a06", hideNav: false, }
+      ,{ key:7, title: "Touchable*系列", component: Course8, isFA: false, icon: "ios-hand", size: 50, color: "#4285f4", hideNav: false, }
+      ,{ key:8, title: "ListView", component: Course9, isFA: false, icon: "ios-list-box", size: 50, color: "#2aa2ef", hideNav: false, }
     ]
    }
  }

view/component/course8.js

@@ -0,0 +1,108 @@
+/**
+ * Course 8
+ * React Native控件之Touchable*系列组件详解
+ */
+ import React, { Component } from 'react';
+ import {
+   StyleSheet,
+   Text,
+   View,
+   ScrollView,
+   TouchableHighlight,
+   TouchableOpacity,
+ } from 'react-native';
+
+ import Util from '../utils';
+
+ export default class extends Component{
+   constructor() {
+     super();
+     this.state = {
+       eventLog: [],
+     }
+   }
+
+   _appendEvent(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  }
+
+   render(){
+     return(
+       <ScrollView style={styles.rootViewContainer}>
+         <View style={styles.container}>
+          <Text >
+            TouchableHighlight实例
+          </Text>
+          <TouchableHighlight
+            underlayColor="rgb(210, 230, 255)"
+            activeOpacity={0.5}
+            style={{ borderRadius: 8,padding: 6,marginTop:5}}
+            >
+               <Text style={{fontSize:16, marginTop:20}}>点击我</Text>
+          </TouchableHighlight>
+        </View>
+
+        <View style={styles.container}>
+          <Text>
+             TouchableOpacity实例
+          </Text>
+          <TouchableOpacity style={{marginTop:20,padding:6}}>
+             <Text style={{fontSize:16, marginTop:10}}>点击改变透明度</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.container}>
+          <Text>
+             onPress,onPressIn,onPressOut,onLongPress实例
+          </Text>
+          <View style={[styles.row, {justifyContent: 'center'}]}>
+            <TouchableOpacity
+              style={styles.wrapper}
+              onPress={() => this._appendEvent('press')}
+              onPressIn={() => this._appendEvent('pressIn')}
+              onPressOut={() => this._appendEvent('pressOut')}
+              onLongPress={() => this._appendEvent('longPress')}>
+              <Text style={styles.button}>
+                Press Me
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View  style={styles.eventLogBox}>
+            {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
+          </View>
+        </View>
+
+      </ScrollView>
+     )
+   }
+ }
+
+ const styles = StyleSheet.create({
+   rootViewContainer:{
+    //  marginTop: 70,
+   },
+   container: {
+     flex: 1,
+     marginTop: 20,
+     justifyContent: 'center',
+     alignItems: 'center',
+     backgroundColor: '#F5FCFF',
+   },
+   button: {
+    color: '#007AFF',
+  },
+  wrapper: {
+    borderRadius: 8,
+  },
+  eventLogBox: {
+    padding: 10,
+    margin: 10,
+    height: 120,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+ });

view/component/course9.js

@@ -0,0 +1,188 @@
+/**
+ * Course 9
+ * React Native控件之ListView组件讲解以及详细实例
+ */
+ import React, { Component } from 'react';
+ import {
+   StyleSheet,
+   Text,
+   View,
+   ScrollView,
+   ListView,
+   Image,
+   TouchableOpacity,
+   TouchableHighlight,
+ } from 'react-native';
+
+ import Util from '../utils';
+ var THUMB_URLS = [
+  require('../resource/img/course9/bee_00_coughing.png'),
+  require('../resource/img/course9/bee_01_shower.png'),
+  require('../resource/img/course9/bee_02_waiting.png'),
+  require('../resource/img/course9/bee_03_freezing.png'),
+  require('../resource/img/course9/bee_04_love.png'),
+  require('../resource/img/course9/bee_05_cry.png'),
+  require('../resource/img/course9/bee_06_showtime.png'),
+  require('../resource/img/course9/bee_07_reading.png'),
+  require('../resource/img/course9/bee_08_drinking.png'),
+  require('../resource/img/course9/bee_09_sick.png'),
+  require('../resource/img/course9/bee_10_working.png'),
+  require('../resource/img/course9/bee_11_phone.png'),
+  require('../resource/img/course9/bee_12_stop.png'),
+];
+
+ export default class extends Component{
+   constructor() {
+     super();
+     var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+     this.state = {
+      //  dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row 10','row 11','row 12']),
+         dataSource: ds.cloneWithRows(this._genRows({}))
+     }
+   }
+
+  //  _renderRow(rowData: string, sectionID: number, rowID: number) {
+  //   var imgSource = THUMB_URLS[rowID];
+  //   return (
+  //       <TouchableOpacity>
+  //         <View style={styles.row}>
+  //           <Image style={styles.thumb} source={imgSource} />
+  //           <View style={{flexDirection: 'column'}}>
+  //             <Text style={styles.itemTitle}>
+  //               {rowData}
+  //             </Text>
+  //             <Text style={styles.itemContent}>
+  //               {'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur.'}
+  //             </Text>
+  //           </View>
+  //         </View>
+  //       </TouchableOpacity>
+  //   );
+  //  }
+
+   _renderRow(rowData: string, sectionID: number, rowID: number) {
+    var imgSource = THUMB_URLS[rowID];
+    return (
+      <TouchableHighlight underlayColor="red">
+        <View>
+          <View style={styles.row3}>
+            <Image style={styles.thumb3} source={imgSource} />
+            <Text style={styles.text3}>
+              {rowData}
+            </Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+
+  _genRows(pressData: {[key: number]: boolean}): Array<string> {
+    var dataBlob = [];
+    for (var ii = 0; ii < THUMB_URLS.length; ii++) {
+      dataBlob.push('单元格 ' + ii);
+    }
+    return dataBlob;
+  }
+
+   render(){
+     return(
+       <ScrollView style={styles.rootViewContainer}>
+         {/*实例一*/}
+         {/*<View style={styles.container}>
+          <Text >
+            TouchableHighlight实例
+          </Text>
+          <ListView
+            dataSource={this.state.dataSource}
+            renderRow={(rowData) => <Text>{rowData}</Text>}
+          />
+        </View>*/}
+
+        {/*实例二*/}
+        {/*<View style={styles.container}>
+          <ListView
+            dataSource={this.state.dataSource}
+            renderRow={this._renderRow}
+            renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
+          />
+        </View>*/}
+
+        {/*实例三*/}
+        <View style={styles.container}>
+          <ListView
+            initialListSize={12}
+            contentContainerStyle={styles.list3}
+            dataSource={this.state.dataSource}
+            renderRow={this._renderRow}
+          />
+        </View>
+      </ScrollView>
+     )
+   }
+ }
+
+ const styles = StyleSheet.create({
+   rootViewContainer:{
+   },
+   container: {
+     flex: 1,
+     justifyContent: 'center',
+     backgroundColor: '#F5FCFF',
+   },
+   row: {
+    flexDirection: 'row',
+    // justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6',
+  },
+  thumb: {
+    width: 64,
+    height: 64,
+    marginTop: 10,
+    marginRight: 10,
+  },
+  itemTitle: {
+    flex:1,
+    fontSize:25,
+    color:'blue'
+  },
+  itemContent: {
+    flex:1,
+    width: Util.size.width - 64 - 10 - 10,
+    height: 60,
+    fontSize:16,
+    color:'gray'
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#CCCCCC',
+  },
+
+  list3: {
+    marginTop:5,
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  row3: {
+    justifyContent: 'center',
+    padding: 5,
+    margin: 3,
+    width: 85,
+    height: 85,
+    backgroundColor: '#F6F6F6',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 5,
+    borderColor: '#CCC'
+  },
+  thumb3: {
+    width: 45,
+    height: 45
+  },
+  text3: {
+    flex: 1,
+    marginTop: 5,
+    fontWeight: 'bold'
+  },
+ });