使用react-native做一個簡單的應用－06商品介面的實現

標籤：

商品介面實現起來很簡單，其實就是一個listview的使用：

關於listview的使用，在官方文檔裡面已經介紹的很詳細了。在這裡我要提一個坑。

listview在Android和iOS中的效果是不一樣的，listview對iOS的支援已經很好了，但是對android很多屬性都不支援。有些地方官方文檔也說的模稜兩可的，因此如果想做炫酷的上、下拉效果的話，建議做iOS。

下面看一下代碼吧：

  1 ‘use strict‘  2   3 var React = require(‘react-native‘)  4 import Icon from ‘react-native-vector-icons/FontAwesome‘  5 import AniImage from ‘../components/AniImage‘  6 import AniRoll from ‘../components/AniRoll‘  7 var {  8   Image,  9   ListView, 10   StyleSheet, 11   Text, 12   View, 13   TouchableOpacity, 14   Navigator, 15   PropTypes 16 } = React 17  18 var REQUEST_URL = ‘http://192.168.6.5:8888/getCommidity‘ 19  20 class Commodity extends React.Component { 21   static propTypes = { 22     navigator: PropTypes.object, 23     fetch: PropTypes.func 24   }; 25   constructor (props) { 26     super(props) 27     this.state = { 28       dataSource: new ListView.DataSource({ 29         rowHasChanged: (row1, row2) => row1 !== row2 30       }), 31       loaded: false 32     } 33   } 34   componentDidMount () { 35     this.fetchData() 36   } 37  38   fetchData () { 39     fetch (REQUEST_URL) 40     .then((response) => response.json()) 41     .then((responseData) => { 42       this.setState({ 43         dataSource: this.state.dataSource.cloneWithRows(responseData), 44         loaded: true 45       }) 46     }) 47     .done() 48   } 49  50   render () { 51     if (!this.state.loaded) { 52       return this.renderLoadingView() 53     } 54  55     return ( 56       <ListView 57         initialListSize={3} 58         dataSource={this.state.dataSource} 59         renderRow={this.renderCommidity.bind(this)} 60         style={styles.listView}/> 61     ) 62   } 63  64   renderLoadingView () { 65     return ( 66       <View style={styles.txtContainer}> 67        <AniRoll inputRange={[0, 1]} outputRange={[‘0deg‘, ‘10000deg‘]} style={{width: 50, height: 50}} /> 68         <Text> 69           正在載入圖文。。。 70         </Text> 71       </View> 72     ) 73   } 74  75   renderCommidity (commidities) { 76     return ( 77       <View style={styles.container} > 78         <Image style={styles.viewTopImage} source={require(‘../assets/listbg.png‘)}> 79           <TouchableOpacity onPress={this.toCommodityScreen.bind(this, commidities)}> 80             <AniImage 81             type={‘image‘} 82             inputRange={[0, 100]} 83             outputRange={[0, 1]} 84             style={styles.aniImage} 85             url={‘http://192.168.6.5:8888/getImage?imgName=‘ + commidities.imgPath1} /> 86           </TouchableOpacity> 87         </Image> 88         <View style={styles.viewTxtContent}> 89           <TouchableOpacity> 90             <Text style={styles.txtContent}>{commidities.title}</Text> 91           </TouchableOpacity> 92         </View> 93         <View style={styles.viewBottom}> 94           <View style={styles.viewBottomLeft}> 95             <Icon name=‘heart-o‘ size={20} /> 96             <Text style={styles.txtContent} >{commidities.love}</Text> 97           </View> 98           <View style={styles.viewBottomRight}> 99             <View style={styles.viewBottomRightContainer}>100               <Icon name=‘clock-o‘ size={20} />101               <Text style={styles.txtContent} >{commidities.date}</Text>102             </View>103           </View>104         </View>105         <Image source={require(‘../assets/splite.png‘)} style={styles.imageSplit}/>106       </View>107     )108   }109 110   toCommodityScreen (commidities) {111     var commodity = commidities112     let navigator = this.props.navigator113     navigator.push({id: ‘CommodityScreen‘, sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump, passProp: {commodity}})114   }115 }116 117 var styles = StyleSheet.create({118   container: {119     flex: 1,120     flexDirection: ‘column‘,121     backgroundColor: ‘#ffffff‘122   },123   txtContainer: {124     flex: 1,125     alignItems: ‘center‘,126     justifyContent: ‘center‘,127     backgroundColor: ‘#fffff‘128   },129   aniImage: {130     height: 330,131     width: null132   },133   viewTopImage: {134     height: 330,135     width: null,136     margin: 10137   },138   txtContent: {139     fontSize: 16,140     marginLeft: 5141   },142   viewTxtContent: {143     marginLeft: 10,144     marginRight: 10,145     marginBottom: 5,146     flex: 1147   },148   txtBottom: {149     flex: 1,150     fontSize: 12151   },152   viewBottom: {153     marginLeft: 10,154     marginRight: 10,155     marginBottom: 5,156     flex: 1,157     flexDirection: ‘row‘158   },159   imageSplit: {160     flex: 0.3,161     backgroundColor: ‘#F0F0F0‘162   },163   numberText: {164     fontSize: 15,165     marginLeft: 20166   },167   viewBottomLeft: {168     flex: 1,169     flexDirection: ‘row‘170   },171   viewBottomRight: {172     flex: 1,173     alignItems: ‘flex-end‘174   },175   viewBottomRightContainer: {176     flex: 1,177     flexDirection: ‘row‘178   }179 })180 181 module.exports = Commodity

一、構造方法：

1  constructor (props) {2     super(props)3     this.state = {4       dataSource: new ListView.DataSource({5         rowHasChanged: (row1, row2) => row1 !== row26       }),7       loaded: false8     }9   }

dataSource就是listview的資料來源，loaded則是判斷資料是否載入完畢。

二、fetchData方法

擷取listview的介面資料，資料請求完成之後，重新渲染介面將loaded設定為true

三、toCommodityScreen方法

進入商品的詳情介面。

使用react-native做一個簡單的應用－06商品介面的實現