实现产品列表卡视图必须添加2个文件ListItem.js和ProductList.js,请注意苹果手机React-Native默认是不支持https协议的:
- import React,{Component} from 'React';
- import {
- TouchableWithoutFeedback,Image,Animated,View,Text
- } from 'react-native';
- export default class ListItem extends Component {
- render() {
- const { id,itemWidth,image,wname,jdPrice,onPressItem } = this.props
- //console.log(onPressItem)
- return (
- <TouchableWithoutFeedback style={{flex:1,alignItems:'center'}} onPress = {() => onPressItem(id)}>
- <View style = {{marginTop: 2,marginBottom: 2,paddingRight: 4,}}>
- <Image style={{ width: itemWidth,height: 200 }} source={image} />
- <Text numberOfLines={4}
- style={{
- width: itemWidth,flexWrap: 'wrap',fontSize: 12,color: 'black',flex: 1,paddingLeft: 5,paddingRight: 5,height: 65,backgroundColor: 'white'
- }}
- >{wname}</Text>
- <View style={{flexDirection:'row',justifyContent: 'space-around',paddingRight: 10,backgroundColor: 'white',paddingBottom: 5}}>
- <Text
- style={{
- flex: 1,alignSelf: 'flex-start',textAlign: 'left',fontSize: 13,color: '#f15353'
- }}
- >¥{jdPrice}</Text>
- <TouchableWithoutFeedback>
- <View
- style={{
- width:50,height:20,backgroundColor: 'pink',borderRadius:30,justifyContent: 'center',alignItems: 'center',}}
- >
- <Text style={{color:'#f15353',fontSize:12,textAlign:'center'}}>看相似</Text>
- </View>
- </TouchableWithoutFeedback>
- </View>
- </View>
- </TouchableWithoutFeedback>
- );
- }
- }
- import React,{Component} from 'React';
- import {
- StyleSheet,FlatList,Dimensions
- } from 'react-native';
- import ListItem from './ListItem';
- const SCREEN_WIDTH = Dimensions.get('window').width;
- export default class ProductList extends Component {
- state = {
- columns: 2,key: 1,array: [],}
- constructor(props) {
- super(props)
- this.getProducts = this.getProducts.bind(this)
- }
- getProducts() {
- //JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
- //JSON.parse() 方法用于将一个 JSON 字符串转换为对象
- fetch('http://m.jd.com/index/recommend.action?_format_=json&page=1',{
- method: 'GET'
- }).then((response)=> {
- return response.json()
- }).then((respnoseJson) => {
- return JSON.parse(respnoseJson.recommend)
- }).then((recommend) => {
- // console.log(recommend.wareInfoList)
- let newArray = this.state.array.slice()
- let concatArray = newArray.concat(recommend.wareInfoList)
- this.setState({
- array: concatArray
- })
- }).catch((error) => {
- console.warn(error);
- }).done();
- }
- componentDidMount(){
- this.getProducts()
- }
- onPressingItem(wareId) {
- //console.log(wareId)
- let url = 'http://item.m.jd.com/product/' + wareId + '.html';
- this.props.nav.push({
- id: 'webview',title: 'webview',url: url
- });
- }
- render() {
- const { columns,key,array } = this.state
- return (
- <View style = {styles.container}>
- <FlatList
- key = {key}
- numColumns = {columns}
- data = {array}
- renderItem = {({ item,index }) => {
- return <ListItem
- id = {item.wareId}
- itemWidth = {SCREEN_WIDTH / columns - 2 }
- image = {{ uri: item.imageurl }}
- wname = { item.wname }
- jdPrice = { item.jdPrice }
- onPressItem = {this.onPressingItem}
- />
- }}
- keyExtractor = {
- (item,index) => { return item.wareId }
- }
- />
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,backgroundColor: '#EEE9E9',flexDirection:'row',},})
安卓和苹果模拟器中运行的效果截图如下: