使用react-native做一个简单的应用－06商品界面的实现

商品界面实现起来很简单，其实就是一个listview的使用：

关于listview的使用，在官方文档里面已经介绍的很详细了。在这里我要提一个坑。

listview在Android和iOS中的效果是不一样的，listview对iOS的支持已经很好了，但是对android很多属性都不支持。有些地方官方文档也说的模棱两可的，因此如果想做炫酷的上、下拉效果的话，建议做iOS。

下面看一下代码吧：

 'use strict'

 var React = require('react-native')
 import Icon from 'react-native-vector-icons/FontAwesome'
 import AniImage from '../components/AniImage'
 import AniRoll from '../components/AniRoll'
 var {
   Image,
   ListView,
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   Navigator,
   PropTypes
 } = React

 var REQUEST_URL = 'http://192.168.6.5:8888/getCommidity'

 class Commodity extends React.Component {
   static propTypes = {
     navigator: PropTypes.object,
     fetch: PropTypes.func
   };
   constructor (props) {
     super(props)
     this.state = {
       dataSource: new ListView.DataSource({
         rowHasChanged: (row1, row2) => row1 !== row2
       }),
       loaded: false
     }
   }
   componentDidMount () {
     this.fetchData()
   }

   fetchData () {
     fetch (REQUEST_URL)
     .then((response) => response.json())
     .then((responseData) => {
       this.setState({
         dataSource: this.state.dataSource.cloneWithRows(responseData),
         loaded: true
       })
     })
     .done()
   }

   render () {
     if (!this.state.loaded) {
       return this.renderLoadingView()
     }

     return (
       <ListView
         initialListSize={3}
         dataSource={this.state.dataSource}
         renderRow={this.renderCommidity.bind(this)}
         style={styles.listView}/>
     )
   }

   renderLoadingView () {
     return (
       <View style={styles.txtContainer}>
        <AniRoll inputRange={[0, 1]} outputRange={['0deg', '10000deg']} style={{width: 50, height: 50}} />
         <Text>
           正在加载图文。。。
         </Text>
       </View>
     )
   }

   renderCommidity (commidities) {
     return (
       <View style={styles.container} >
         <Image style={styles.viewTopImage} source={require('../assets/listbg.png')}>
           <TouchableOpacity onPress={this.toCommodityScreen.bind(this, commidities)}>
             <AniImage
             type={'image'}
             inputRange={[0, 100]}
             outputRange={[0, 1]}
             style={styles.aniImage}
             url={'http://192.168.6.5:8888/getImage?imgName=' + commidities.imgPath1} />
           </TouchableOpacity>
         </Image>
         <View style={styles.viewTxtContent}>
           <TouchableOpacity>
             <Text style={styles.txtContent}>{commidities.title}</Text>
           </TouchableOpacity>
         </View>
         <View style={styles.viewBottom}>
           <View style={styles.viewBottomLeft}>
             <Icon name='heart-o' size={20} />
             <Text style={styles.txtContent} >{commidities.love}</Text>
           </View>
           <View style={styles.viewBottomRight}>
             <View style={styles.viewBottomRightContainer}>
               <Icon name='clock-o' size={20} />
               <Text style={styles.txtContent} >{commidities.date}</Text>
             </View>
           </View>
         </View>
         <Image source={require('../assets/splite.png')} style={styles.imageSplit}/>
       </View>
     )
   }

   toCommodityScreen (commidities) {
     var commodity = commidities
     let navigator = this.props.navigator
     navigator.push({id: 'CommodityScreen', sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump, passProp: {commodity}})
   }
 }

 var styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
     backgroundColor: '#ffffff'
   },
   txtContainer: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#fffff'
   },
   aniImage: {
     height: 330,
     width: null
   },
   viewTopImage: {
     height: 330,
     width: null,
     margin: 10
   },
   txtContent: {
     fontSize: 16,
     marginLeft: 5
   },
   viewTxtContent: {
     marginLeft: 10,
     marginRight: 10,
     marginBottom: 5,
     flex: 1
   },
   txtBottom: {
     flex: 1,
     fontSize: 12
   },
   viewBottom: {
     marginLeft: 10,
     marginRight: 10,
     marginBottom: 5,
     flex: 1,
     flexDirection: 'row'
   },
   imageSplit: {
     flex: 0.3,
     backgroundColor: '#F0F0F0'
   },
   numberText: {
     fontSize: 15,
     marginLeft: 20
   },
   viewBottomLeft: {
     flex: 1,
     flexDirection: 'row'
   },
   viewBottomRight: {
     flex: 1,
     alignItems: 'flex-end'
   },
   viewBottomRightContainer: {
     flex: 1,
     flexDirection: 'row'
   }
 })

 module.exports = Commodity

一、构造方法：

  constructor (props) {
     super(props)
     this.state = {
       dataSource: new ListView.DataSource({
         rowHasChanged: (row1, row2) => row1 !== row2
       }),
       loaded: false
     }
   }

dataSource就是listview的数据源，loaded则是判断数据是否加载完毕。

二、fetchData方法

获取listview的接口数据，数据请求完成之后，重新渲染界面将loaded设置为true

三、toCommodityScreen方法

进入商品的详情界面。