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

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

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>
		);
	}
}

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

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',},})

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