native react 图片多选_React Native(多选实现,2017-09-05)

清疚 2023-01-08 08:05 96阅读 0赞

![Image 1][]

20170906150468611759afb0250585a.gif

1.renderShowEditView里面的2个图片自己替换一下

2.复制代码直接就可以跑

import React, \{PureComponent\} from 'react'

import \{View, Text, StyleSheet, ScrollView, TouchableOpacity, ListView, Image, Dimensions\} from 'react-native'

const ds = new ListView.DataSource(\{rowHasChanged: (r1, r2) => r1 !== r2\});

let \{width, height\} = Dimensions.get('window');

export default class CircleList extends PureComponent \{

constructor(props) \{

super(props);

this.state = \{

isEdict: false,//是否编辑状态

selectArray: \[\],

dataSource: \[\{id: '1', title: '文章1'\}, \{id: '2', title: '文章2'\}, \{id: '3', title: '文章3'\},\],

componentDidMount() \{

let array = this.state.dataSource;

let newArray = \[\]

//服务器返回的数据,自己增加一个状态,控制是否选中

for (let i = 0; i < array.length; i++) \{

let dict = array\[i\]

dict.isSelect = false;

newArray.push(dict);

this.setState(\{

dataSource: newArray

\});

render() \{

return (

\{'点我进入编辑/非编辑状态'\}

renderRow=\{this.renderRow\}

dataSource=\{ds.cloneWithRows(this.state.dataSource)\}/>

\{JSON.stringify(this.state.selectArray)\}

);

renderRow = (rowData, sectionID, rowID, highlightRow) => \{

return (

\{this.renderShowEditView(this.state.isEdict, rowData, rowID, ()=> \{

this.rightOnPress(rowData, rowID)

\})\}

\{rowData.title\}

)

//是否进去编辑状态

onEditOnPress = ()=> \{

this.setState(\{isEdict: !this.state.isEdict\});

//左边按钮选择

rightOnPress = (rowData, index)=> \{

let selectArray = this.state.selectArray;

let data = this.state.dataSource;

let newArray = \[\]

for (let i = 0; i < data.length; i++) \{

let dict = data\[i\];

if (index == i) \{

if (dict.isSelect == true) \{

dict.isSelect = false

for (let j = 0; j < selectArray.length; j++) \{

let id = selectArray\[j\];

if (id == dict.id) \{

selectArray.splice(j, 1);

\} else \{

dict.isSelect = true

selectArray.push(dict.id);

newArray.push(dict);

this.setState(\{

selectArray: selectArray,

dataSource: newArray

\});

//是否选中

renderShowEditView(isEdict, rowData, index, onPress) \{

if (isEdict == true) \{

let imageURL = require('../../res/img/circle/没选中.png')

if (rowData.isSelect == true) \{

imageURL = require('../../res/img/circle/选中.png')

return (

onPress(rowData, index)

\}\} style=\{ \{height: 111, width: 40, justifyContent: 'center', alignItems: 'center'\}\}>

)

[Image 1]:

native react 图片多选_React Native(多选实现,2017-09-05)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 native react 图片多选_React Native(多选实现,2017-09-05)

相关 React Native图片缓存组件react-native-rn-cacheimage

相关 react native

相关 React Native

相关 react-native

相关 react-native多图上传 react-native-image-picker图片上传之多个上传图片

相关 React Native 使用react-native-image-picker库实现图片上传功能

相关 React Native

相关 React Native react-native-video 视频库

相关 react-native自定义下拉单选