基于React Native构建的仿京东客户端(四) - 产品列表卡视图

前端之家收集整理的这篇文章主要介绍了基于React Native构建的仿京东客户端(四) - 产品列表卡视图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现产品列表卡视图必须添加2个文件ListItem.js和ProductList.js,请注意苹果手机React-Native默认是不支持https协议的:

ListItem.js文件完整的代码如下:

  1. import React,{Component} from 'React';
  2. import {
  3. TouchableWithoutFeedback,Image,Animated,View,Text
  4. } from 'react-native';
  5.  
  6. export default class ListItem extends Component {
  7.  
  8.  
  9. render() {
  10. const { id,itemWidth,image,wname,jdPrice,onPressItem } = this.props
  11. //console.log(onPressItem)
  12. return (
  13. <TouchableWithoutFeedback style={{flex:1,alignItems:'center'}} onPress = {() => onPressItem(id)}>
  14. <View style = {{marginTop: 2,marginBottom: 2,paddingRight: 4,}}>
  15. <Image style={{ width: itemWidth,height: 200 }} source={image} />
  16. <Text numberOfLines={4}
  17. style={{
  18. width: itemWidth,flexWrap: 'wrap',fontSize: 12,color: 'black',flex: 1,paddingLeft: 5,paddingRight: 5,height: 65,backgroundColor: 'white'
  19. }}
  20. >{wname}</Text>
  21. <View style={{flexDirection:'row',justifyContent: 'space-around',paddingRight: 10,backgroundColor: 'white',paddingBottom: 5}}>
  22. <Text
  23. style={{
  24. flex: 1,alignSelf: 'flex-start',textAlign: 'left',fontSize: 13,color: '#f15353'
  25. }}
  26. >¥{jdPrice}</Text>
  27. <TouchableWithoutFeedback>
  28. <View
  29. style={{
  30. width:50,height:20,backgroundColor: 'pink',borderRadius:30,justifyContent: 'center',alignItems: 'center',}}
  31. >
  32. <Text style={{color:'#f15353',fontSize:12,textAlign:'center'}}>看相似</Text>
  33. </View>
  34. </TouchableWithoutFeedback>
  35. </View>
  36. </View>
  37. </TouchableWithoutFeedback>
  38. );
  39. }
  40. }

ProductList.js文件完整的代码如下:

  1. import React,{Component} from 'React';
  2. import {
  3. StyleSheet,FlatList,Dimensions
  4. } from 'react-native';
  5. import ListItem from './ListItem';
  6. const SCREEN_WIDTH = Dimensions.get('window').width;
  7.  
  8. export default class ProductList extends Component {
  9. state = {
  10. columns: 2,key: 1,array: [],}
  11.  
  12. constructor(props) {
  13. super(props)
  14. this.getProducts = this.getProducts.bind(this)
  15. }
  16.  
  17. getProducts() {
  18. //JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
  19. //JSON.parse() 方法用于将一个 JSON 字符串转换为对象
  20. fetch('http://m.jd.com/index/recommend.action?_format_=json&page=1',{
  21. method: 'GET'
  22. }).then((response)=> {
  23. return response.json()
  24. }).then((respnoseJson) => {
  25. return JSON.parse(respnoseJson.recommend)
  26. }).then((recommend) => {
  27. // console.log(recommend.wareInfoList)
  28. let newArray = this.state.array.slice()
  29. let concatArray = newArray.concat(recommend.wareInfoList)
  30. this.setState({
  31. array: concatArray
  32. })
  33. }).catch((error) => {
  34. console.warn(error);
  35. }).done();
  36. }
  37.  
  38. componentDidMount(){
  39. this.getProducts()
  40. }
  41.  
  42. onPressingItem(wareId) {
  43. //console.log(wareId)
  44. let url = 'http://item.m.jd.com/product/' + wareId + '.html';
  45. this.props.nav.push({
  46. id: 'webview',title: 'webview',url: url
  47. });
  48. }
  49.  
  50. render() {
  51. const { columns,key,array } = this.state
  52. return (
  53. <View style = {styles.container}>
  54. <FlatList
  55. key = {key}
  56. numColumns = {columns}
  57. data = {array}
  58. renderItem = {({ item,index }) => {
  59. return <ListItem
  60. id = {item.wareId}
  61. itemWidth = {SCREEN_WIDTH / columns - 2 }
  62. image = {{ uri: item.imageurl }}
  63. wname = { item.wname }
  64. jdPrice = { item.jdPrice }
  65. onPressItem = {this.onPressingItem}
  66. />
  67. }}
  68. keyExtractor = {
  69. (item,index) => { return item.wareId }
  70. }
  71. />
  72. </View>
  73. );
  74. }
  75. }
  76.  
  77. const styles = StyleSheet.create({
  78. container: {
  79. flex: 1,backgroundColor: '#EEE9E9',flexDirection:'row',},})

安卓和苹果模拟器中运行的效果截图如下:

猜你在找的React相关文章