React Native之学习ListView的单选以及记录数据

我们对于ReactNative重新更新界面是重新渲染，然后如果是列表过长的情况下，我们一般来说会使用ListView来提高性能，以及提高局部渲染的问题。所以在我们在服务器那边获取下来的数据例如：[{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'},{name:'hehe',id:'qwe'}]。但是有一个问题就是我们获取的数据里面没办法让我们去识别我们点击了哪一个？那如果不加进去又会遇到一个问题就是，我们在它的item里面进入一个判断的state。但是无法实现界面刷新问题。这个还是机制的问题。所以这个时候我们应该在它的ListView一开始传入的数据进行变化。插入一个数值：下面就是代码

 
var mSelectWhat = -1;
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); //当且仅当cell中的任意两行不相等时才重新渲染\
export default class Designer extends Component {
constructor(props) {
super(props);
this.state = {
isShowSearch: false, //是否显示搜索框
dataSource: ds.cloneWithRows([])
};
this.checkedArr = []
}
static propTypes = {
//属性
};
static defaultProps = {
//属性默认值
};

componentWillMount() {
GesstDesignTeam((success) => { // 1处 服务接口获取数据
LetAll = success.result;
alert(success.result)
success.result.map((o, i) => {

if (!this.props.mID) { 识别第二次进来的参数是否有点击过
LetAll[i]['isCheck'] = false;
} else {
if (this.props.mID == o.user_id) { //判断点击了谁
LetAll[i]['isCheck'] = true;
} else {
LetAll[i]['isCheck'] = false;
}
}

})
this.setState({ dataArr: ds.cloneWithRows(LetAll) })
})
}
onBack() {
if (this.props.getname) {
//回调传值给上个页面
this.props.getname(mSelectWhat != -1 ? LetAll[mSelectWhat] : []);
}
this.props.navigator.pop();
}

changeSearch() {
this.setState({ isShowSearch: !this.state.isShowSearch })
}
renderHeadLeft() {

return (
<TouchableOpacity onPress={this.onBack.bind(this)}>
<Text style={{ color: '#aaa' }}>取消</Text>
</TouchableOpacity>
)
}
ChangeCheck(item, index) { //判断点击了谁
if (item.isCheck) {
LetAll[index]['isCheck'] = false;
mSelectWhat = -1;
} else {
LetAll.map((o, i) => {
if (i == index) {
LetAll[i]['isCheck'] = true
mSelectWhat = i;
} else {
LetAll[i]['isCheck'] = false
}
})
}
this.setState({ dataArr: ds.cloneWithRows(LetAll) });
}

renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<ListItem onPress={this.ChangeCheck.bind(this, rowData, rowID)} key={rowID} style={{ backgroundColor: 'white', marginLeft: 0, paddingLeft: _getWidth(15) }}>
<Left >
<Text style={{ lineHeight: 20 }}>{rowData.name}</Text>
</Left>

{rowData.isCheck && <Image style={{ width: 20, height: 20 }} source={require('../../../img/isChecked.png')}></Image>}
</ListItem>
)
}

render() {

return (
<Container style={{ backgroundColor: _backgroundColor }}>
<Content>

<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</Content>
</Container>
);
}
}