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