今天我们要获取全部产品，并用flatlist展示他们。
因为要用到flatlist，所以：
|
1 2 3 4 5 6 7 |
import { ....... //产品列表1 FlatList, //end 产品列表 ........ } from 'react-native'; |
因为要保存产品的数据，所以我们创建一个goods state ：
|
1 2 3 4 5 |
this.state = { ...... categorys: [], goods: [], //产品列表2 } |
下面我们使用网络获取到产品,并赋值给state goods：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//从网络获取标签 _loadcatsandproject() { .......... .then((responseJson) => { console.log('网络全部'); this.setState({ categorys: responseJson.category, //flatlist goods: responseJson.project_all, //end flatlist }) ........... |
好，现在我们已经，拿到了goods数据，那么我们就把它展示到flatlist中吧：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
render() { ....................... <View style={styles.scrollviewclass}> <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} > <View key={0} style={"全部" == this.state.catid ? styles.active : ""}><Text style={styles.typebox} onPress={() => this._loadProduct('全部')}> 全部</Text></View> {this._rendercatList(this.state.categorys)} </ScrollView> </View> <View style={styles.flatlistview}> <FlatList style={{width:'100%'}} keyExtractor={this._keyExtractor} //把item.id作为key data={this.state.goods} numColumns={2} renderItem={({ item }) => <TouchableHighlight style={styles.flatitemview} onPress={() => navigate('item',{ id: item.id })}><View > <View><Image source={{ uri: 'https://www.XXXXXXXX.cn' + item.pic }} style={styles.flatitemimg} /> </View> <View><Text>{item.name}</Text></View> <View><Text>¥ {item.minPrice}</Text></View> </View> </TouchableHighlight>} /> </View> ....................... </View> ); |
别忘了引入TouchableHighlight,我们在每个item中都用到了：
|
1 2 3 4 5 6 |
import { ...... //flatlist TouchableHighlight, //end flatlist } from 'react-native'; |
你会看到keyExtractor，他需要一个函数来实现把产品id作为key
|
1 |
_keyExtractor = (item, index) => item.id + '_' + index; |
flatlist中的：
data用来绑定数据
style：控制样式
numColumns：一行的列数
renderItem：需要渲染的每一个项的视图。
下面添加一个样式，让他美丽起来：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//flatlist flatitemimg: { width: '100%', height: 200, }, flatitemview: { flex: 1, marginRight:10, marginBottom:10, }, flatlistview: { width: deviceWidth, paddingLeft:10, paddingTop:10, marginBottom:250, } //end flatlist |
还没有完，让flatlist每个元素点击后，跳转到item视图（这行在代码里我们已经做了）：
|
1 |
renderItem={({ item }) => <TouchableHighlight style={styles.flatitemview} onPress={() => navigate('item',{ id: item.id })}> |
来到itemScreen中，拿到我们传的id参数：
|
1 2 3 4 5 6 7 8 9 10 |
render() { //flatlist click const { params } = this.props.navigation.state; return ( <View style={styles.container} > <Text>{params.id}</Text> </View> ); //end flatlist click } |
看看效果把：
下面粘贴HomeScreen全部代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 |
import React, { Component, PureComponent } from 'react'; import { StyleSheet, Text, View, Image, //分类 ScrollView, //end 分类 //轮播图片加 Dimensions, //end 轮播图片加 //产品列表1 FlatList, //end 产品列表 //flatlist TouchableHighlight, //end flatlist } from 'react-native'; //轮播图片加 import ViewPager from 'react-native-viewpager'; var deviceWidth = Dimensions.get('window').width; //计算设备宽度 //end 轮播图片加 import { StackNavigator, } from 'react-navigation'; import { ItemScreen } from './ItemScreen'; //轮播图片加 const BANNER_IMGS = [ 'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg', 'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg', 'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg', 'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg', 'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg', ]; //end 轮播图片加 class HomeScreen extends PureComponent { //轮播图片加 constructor(props) { super(props); // 用于构建DataSource对象 var dataSource = new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2, }); // 实际的DataSources存放在state中 //从网络获取标签 this._loadcatsandproject(); //end 从网络获取标签 this.state = { dataSource: dataSource.cloneWithPages(BANNER_IMGS), catid: "全部", //修改网络 categorys: [], goods: [], //产品列表2 } } //从网络获取标签 //https://segmentfault.com/q/1010000005813525 _loadcatsandproject() { return fetch('https://www.XXXXXXX.cn/app_dev.php/wxxcx/home', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ }) }) .then((response) => response.json()) .then((responseJson) => { console.log('网络全部'); this.setState({ categorys: responseJson.category, //flatlist goods: responseJson.project_all, //产品列表3 //end flatlist }) console.log('网络分类'); return responseJson.category; }) .catch((error) => { console.error(error); }) ; } _rendercatList(list) { console.log("进入模板map"); return list.map(item => this._itemcat(item)); } _itemcat(item) { console.log("输出每个标签模板"); return ( <View key={item.id} style={item.id == this.state.catid ? styles.active : ""} ><Text key={item.id} style={styles.typebox} onPress={() => this._loadProduct(item.id)}> {item.name}</Text></View> ); } //end 从网络获取标签 //ViewPager播放的内部图片 _renderPage(data, pageID) { return ( <Image source={{ uri: data }} style={styles.page} /> ); } //end 轮播图片加 _loadProduct(catid) { var that = this; console.log(catid); //flatlist 产品类别4 if (catid == "全部") { fetch('https://www.XXXXXXXX.cn/app_dev.php/wxxcx/home', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ }) }) .then((response) => response.json()) .then((responseJson) => { console.log('网络全部'); this.setState({ categorys: responseJson.category, }) console.log('网络分类'); return responseJson.category; }) .catch((error) => { console.error(error); }) ; } //end flatlist 产品类别4 this.setState({ catid: catid, }) } _keyExtractor = (item, index) => item.id + '_' + index; static navigationOptions = { title: '首页', }; /** dataSource: 提供页面数据, renderPage: 用于渲染页面视图, autoPlay: 为true 将自动播放, isLoop: 为true支持循环播放, locked: 为true禁止触摸滚动, onChangePage: 页面变化的回调, renderPageIndicator: 渲染自定义的 ViewPager indicator. */ render() { const { navigate } = this.props.navigation; //this._loadcatsandproject(); 千万不要放到模板中去，因为数据变化-模板会渲染-重新调用此句-会造成无线循环 return ( <View style={styles.container} > <View style={styles.swiper}> <ViewPager style={this.props.style} //样式 dataSource={this.state.dataSource} renderPage={this._renderPage} isLoop={true} autoPlay={true} /> </View> <View style={styles.scrollviewclass}> <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} > <View key={0} style={"全部" == this.state.catid ? styles.active : ""}><Text style={styles.typebox} onPress={() => this._loadProduct('全部')}> 全部</Text></View> {this._rendercatList(this.state.categorys)} </ScrollView> </View> <View style={styles.flatlistview}> <FlatList style={{width:'100%'}} keyExtractor={this._keyExtractor} //把item.id作为key data={this.state.goods} numColumns={2} renderItem={({ item }) => <TouchableHighlight style={styles.flatitemview} onPress={() => navigate('item',{ id: item.id })}><View > <View><Image source={{ uri: 'https://www.XXXXXXXX.cn' + item.pic }} style={styles.flatitemimg} /> </View> <View><Text>{item.name}</Text></View> <View><Text>¥ {item.minPrice}</Text></View> </View> </TouchableHighlight>} /> </View> <Text onPress={() => navigate('item')} >{this.state.catid ? this.state.catid : "全部"}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start', flexDirection: 'column', backgroundColor: '#F6F6F6', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, //分类部分 scrollviewclass: { height: 50, width: deviceWidth, backgroundColor: 'white' }, active: { borderBottomWidth: 1, borderBottomColor: 'red', }, typebox: { width: 70, fontSize: 18, lineHeight: 35, textAlign: 'center', }, //分类部分 //轮播图片加 swiper: { flexDirection: 'row', height: 200, }, page: { width: deviceWidth, height: 200, }, //end 轮播图片加 //flatlist flatitemimg: { width: '100%', height: 200, }, flatitemview: { flex: 1, marginRight:10, marginBottom:10, }, flatlistview: { width: deviceWidth, paddingLeft:10, paddingTop:10, marginBottom:250, } //end flatlist }); const HomeApp = StackNavigator({ home: { screen: HomeScreen }, item: { screen: ItemScreen }, }); export default HomeApp; |
itemScreen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Actions, Scene, Router } from 'react-native-router-flux'; export class ItemScreen extends Component { static navigationOptions = { title: '详情页', tabBarVisible: false, }; render() { //flatlist click const { params } = this.props.navigation.state; return ( <View style={styles.container} > <Text>{params.id}</Text> </View> ); //end flatlist click } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); |