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 (
              <View style={styles.container}>
                <ListView
                  style={styles.left}
                  dataSource={this.state.ds}
                  renderRow={this.renderMover.bind(this)}
                >
                </ListView>
              </View>
      );
    }
    //具體的繪制
    renderMover(rowData: Object ,sectionID: number,rowID: number){
      return(
        <TouchableOpacity style={styles.container} activeOpacity={0.3}>
          <View style={styles.left}>
            <Text>{rowData.name}</Text>
          </View>
          <View style={styles.right}>
            <TouchableOpacity onPress={this.addNum.bind(this,rowData,sectionID,rowID)}>
              <Text> + </Text>
            </TouchableOpacity>
            <View>
              <Text>{rowData.num}</Text>
            </View>
            <TouchableOpacity onPress={this.subNum.bind(this,rowData,sectionID,rowID)}>
              <Text> - </Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      )
  }
  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