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

  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       
 67        
 68         
 69           正在加载图文。。。
 70         
 71       
 72     )
 73   }
 74 
 75   renderCommidity (commidities) {
 76     return (
 77       
 78         
 79           this.toCommodityScreen.bind(this, commidities)}>
 80             <AniImage
 81             type={'image'}
 82             inputRange={[0, 100]}
 83             outputRange={[0, 1]}
 84             color: rgba(0, 0, 0, 1)">{styles.aniImage}
 85             url={'http://192.168.6.5:8888/getImage?imgName=' + commidities.imgPath1} />
 86           
 87         
 88         
 89           
 90             {commidities.title}
 91           
 92         
 93         
 94           
 95             
 96             {commidities.love}
 97           
 98           
 99             
100               
101               {commidities.date}
102             
103           
104         
105         
106       
107     )
108   }
109 
110   toCommodityScreen (commidities) {
111     var commodity = commidities
112     let navigator = this.props.navigator
113     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: null
132   },
133   viewTopImage: {
134     height: 330,
135     width: null,
136     margin: 10
137   },
138   txtContent: {
139     fontSize: 16,
140     marginLeft: 5
141   },
142   viewTxtContent: {
143     marginLeft: 10,
144     marginRight: 10,
145     marginBottom: 5,
146     flex: 1
147   },
148   txtBottom: {
149     flex: 1,
150     fontSize: 12
151   },
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: 20
166   },
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 !== row2
6       }),
7       loaded: false
8     }
9   }