實現產品列表卡檢視必須新增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',
                                paddingLeft: 5,
                                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,
View,
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',
        justifyContent: 'space-around',
        flexDirection:'row',
    },
})
 

安卓和蘋果模擬器中執行的效果截圖如下：