React Native ListView实现购物车功能

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Content,
  TouchableOpacity,
  ListView,
  TextInput
} from 'react-native';
var page=0;
class rn25 extends Component{
constructor(props){
  super(props);
  this.Arr = [
        {
          name: '商品一',
          num:page,
        },
        {
          name: '商品二',
          num:page,
        },
        {
          name: '商品三',
          num:page,
        }
  ];
  this.state={
    ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.Arr),
    list: this.Arr
  };


}

  render(){
        return (
              
                
                
              
      );
    }
    //具体的绘制
    renderMover(rowData: Object ,sectionID: number,rowID: number){
      return(
        
          
            {rowData.name}
          
          
            
               + 
            
            
              {rowData.num}
            
            
               - 
            
          
        
      )
  }
  addNum(rowData,sectionID,rowID){

    let newArr = [...this.state.list];
    let newObj = {...newArr[rowID]}
    newObj.num = newObj.num + 1;
    newArr[rowID] = newObj
      this.setState({
           ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(newArr),
           list: newArr
      });
   console.log(this.state.ds);

  }
  subNum(rowData,sectionID,rowID){
    if (rowData.num==0) {
       alert('2');
    }else{
   let newArr = [...this.state.list];
    let newObj = {...newArr[rowID]}
    newObj.num = newObj.num - 1;
    newArr[rowID] = newObj
      this.setState({
           ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(newArr),
           list: newArr
      });
   console.log(this.state.ds);
  }
 }

}
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection:'row',
      justifyContent:'space-between',
      marginTop:30
    },
    left:{
      marginLeft:10
    },
    right:{
        flexDirection:'row'
    }
  });
 AppRegistry.registerComponent('rn25', () => rn25);

35CE14CF-5B9A-454C-A8CC-01B6AE346ADD.png