如何多重选择并突出显示React本机平面列表中的组件。我已经检查过doc。但是有人可以帮助我有点困惑。我已经使用此方法完成了一次选择。任何人都可以将其修改为一次选择。我将在此处完成single select
的位置提供小吃链接import * as React from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';
const Data = [
{
id: 1,
first_name: 'Sile',
},
{
id: 2,
first_name: 'Clementia',
},
{
id: 3,
first_name: 'Brita',
},
{
id: 4,
first_name: 'Duke',
},
{
id: 5,
first_name: 'Hedvig',
},
{
id: 6,
first_name: 'Paulie',
},
{
id: 7,
first_name: 'Munmro',
},
{
id: 8,
first_name: 'Dyanna',
},
{
id: 9,
first_name: 'Shanta',
},
{
id: 10,
first_name: 'Bambi',
},
];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedItem: null,
};
}
onPressHandler(id) {
this.setState({ selectedItem: id });
}
render() {
return (
<View>
<FlatList
extraData={this.state.selectedItem} //Must implemented
//horizontal={true}
data={Data}
keyExtractor={item => item.id.toString()}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => this.onPressHandler(item.id)}>
<Card
style={
this.state.selectedItem === item.id
? {
padding: 10,
borderRadius: 5,
backgroundColor: '#000000',
}
: {
padding: 10,
borderRadius: 5,
backgroundColor: '#a1a1a1',
}
}>
<Text>{item.first_name}</Text>
</Card>
</TouchableOpacity>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
});
这是示例数据
答案 0 :(得分:1)
我进行了一些更改,并将您的单位列表设为多选。请访问此link。
我做了以下更改,以使其成为多选功能:
item.selected=true
。item.selected==true
,则在平面列表的renderItem中,然后显示选择,否则删除选择。请检查并告知我。
答案 1 :(得分:0)
检查此逻辑,
...
this.state = {
clientsArray: clientsArray,
selectedClients: []
};
//'clientsArray' is your data array
...
_renderCell = ({ item, index }) => {
const { selectedClients, clientsArray } = this.state;
let isSelected =
selectedClients.filter(o => {
return o.id === item.id;
}).length > 0
? true
: false;
//change your UI based on the 'isSelected' value
return (
<TouchableOpacity
activeOpacity={Constants.ACTIVE_OPACITY}
onPress={() => {
this._didSelectClient(item);
}}
>
{
//Your component
}
</TouchableOpacity>
}
_didSelectClient = selectedItem => {
let selectedClients = this.state.selectedClients;
let isItemSelected =
selectedClients.filter(item => {
return item.id.includes(selectedItem.id);
}).length > 0
? true
: false;
if (isItemSelected) {
const index = selectedClients.findIndex(
obj => obj.id === selectedItem.id
);
selectedClients.splice(index, 1);
} else {
selectedClients.push(selectedItem);
}
this.setState({ selectedClients });
};
render() {
...
<FlatList
style={{ flex: 1 }}
data={clientsArray}
renderItem={this._renderCell}
keyExtractor={(item, index) => index.toString()}
extraData={this.props}
ListEmptyComponent={this._renderEmptyComponent}
/>
...
}