Я сделал это для получения нескольких элементов в Flatlist
. В приведенном ниже коде я отметил две строки.
let isSelected = this.state.selectedItems.includes(index)
alert(selectedItems+ " Are selected " + isSelected + this.state.selectedItems.includes(index) );
Каждая строка содержит различное значение.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
StatusBar ,
TouchableOpacity,
View,
FlatList,
ActivityIndicator,
TouchableHighlight,
PropTypes,
Image,
Alert,
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Front';
import {Actions} from 'react-native-router-flux';
export default class Login extends Component<{}> {
constructor(props) {
super(props);
this.state = {
dataSource: [],
pressed: false,
selected_category: '',
black: '',
selectedItems: [],
};
}
_handleCategorySelect = (index) => {
this.setState({selected_category: index});
}
_onPress = () => {
this.props.onPressItem(this.props.id);
}
izijackpotconfirm() {
Actions.izijackpotconfirm()
}
componentDidMount() {
var that = this;
let items = Array.apply(null, Array(25)).map((v, i) => {
return { id: i+1, index: i };
});
that.setState({
dataSource: items,
});
}
_renderItems = ({item, index}) => {
let isSelected = this.state.selectedItems.includes(index)
return(
<View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
<TouchableOpacity
onPress={() => {
let ind = this.state.selectedItems.indexOf(index)
let selectedItems = this.state.selectedItems
if(isSelected && index === ind) {
selectedItems.splice(ind, 1)
} else {
selectedItems.push(index)
}
this.setState({selectedItems:selectedItems})
alert(selectedItems+ " Are selected " + isSelected);
}}
style={isSelected ?
styles.pressed : styles.iziPizi}
onHideUnderlay={() => {
this.setState({ pressed: false });
}}
onShowUnderlay={() => {
this.setState({ pressed: true });
}}
underlayColor={'gray'}
>
<Text style={styles.buttonText}>{ item.id}</Text>
</TouchableOpacity>
</View>
)
}
static navigationOptions = {
title: "Izi Jackpot",
headerStyle: {
backgroundColor: "#354247"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
var jackpotNumbers = [];
let btn_class = this.state.black ? "NormalSet" : "SelectedSet";
const textColor = this.props.selected ? 'red' : 'black';
return(
<View style={styles.container}>
<View style={styles.middlecontainer}>
<Text style={styles.logoText}>Please Select 5 Numbers and Submit</Text>
</View>
<FlatList
data={this.state.dataSource}
extraData={this.state.selectedItems}
ref={(e) => this.items = e}
renderItem={this._renderItems}
numColumns={5}
keyExtractor={(item, index) => index}
/>
<View style={styles.middlecontainer}>
<TouchableOpacity style={styles.button} onPress={this.izijackpotconfirm} >
<Text style={styles.buttonText}>Submit</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
backgroundColor:'#6F9000',
justifyContent: 'center',
flex: 1,
paddingTop: 30,
},
middlecontainer: {
textAlign: 'center',
alignItems: 'center',
justifyContent :'center',
flex:1
},
signupTextCont : {
flexGrow: 1,
alignItems:'flex-end',
justifyContent :'center',
paddingVertical:16,
flexDirection:'row'
},
signupText: {
color:'rgba(255,255,255,0.6)',
fontSize:16
},
signupButton: {
color:'#ffffff',
fontSize:16,
fontWeight:'500'
},
iziPizi: {
width: 55,
padding: 15,
margin: 5,
backgroundColor: 'rgba(255,255,255,0.6)',
borderRadius: 80,
borderWidth: 2,
borderColor: '#FFFFFF',
flex:1
},
pressed: {
width: 55,
padding: 15,
margin: 5,
backgroundColor:'#1c313a',
borderRadius: 80,
borderWidth: 2,
borderColor: '#FFFFFF',
flex:1
},
button: {
width:300,
backgroundColor:'#1c313a',
borderRadius: 25,
marginVertical: 10,
paddingVertical: 13
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
},
logoText : {
color:'#FFFFFF',
fontSize: 16,
fontWeight: '500',
alignItems: 'center',
justifyContent:'center',
},
imageThumbnail: {
justifyContent: 'center',
alignItems: 'center',
height: 100,
},
});
Я хочу получить this.state.selectedItems.includes(index)
из вышеперечисленного. Но он показывает true
, когда я его печатаю. Если я печатаю «isSelected» из вышеприведенного, он печатает false
Я хотел бы знать, как получить значение true
.
На самом деле я хочу выделить несколько элементов в коде с помощью onPress
. Так как я могу это сделать? Пожалуйста помоги мне с этим. Я новичок в React Native.
Заранее спасибо.