React Native Flatlist单选渲染错误只读

Question

你好，我正在尝试制作一个单选平面列表。用户将从这里选择他/她在游戏联盟，但我得到了一个错误"selectedID"；是只读的。我想让他们选择联赛，然后会有一个保存按钮。我看不出我错过了什么。我研究了一下，但找不到任何帮助。

import React , {useState} from 'react';
import {
StyleSheet,
Text,
View,
SectionList,
SafeAreaView,
Image,
FlatList,
StatusBar,
TouchableOpacity
} from 'react-native';

export default () => {
const [selectedID,setSelectedID] = useState(0);
const ListItem = ({ item }) => {
return (
<TouchableOpacity onPress = {() => setSelectedID(item.id)}>
<View style={[styles.item , selectedID = item.id ?
styles.itemSelected:styles.itemUnselected]}>

<Image
source={{
uri: item.uri,
}}
style={styles.itemPhoto}
resizeMode="cover"
/>

<Text style={styles.itemText}>{item.text}</Text>
</View>
</TouchableOpacity>
);
};
return (
<View style={styles.container}>
<StatusBar style="light" />
<SafeAreaView style={{ flex: 1 }}>
<SectionList
contentContainerStyle={{ paddingHorizontal: 10 }}
stickySectionHeadersEnabled={false}
sections={LEAGUES}
renderSectionHeader={({ section }) => (
<>
<Text style={styles.sectionHeader}>{section.title}</Text>
{section.horizontal ? (
<FlatList
horizontal
data={section.data}
renderItem={({ item }) => <ListItem item={item} />}
showsHorizontalScrollIndicator={false}
/>
) : null}
</>
)}
renderItem={({ item, section }) => {
if (section.horizontal) {
return null;
}
return <ListItem item={item} />;
}}
/>
</SafeAreaView>
</View>
);
};
const LEAGUES = [
{
title: '',
horizontal: true,
data: [
{
id: '1',
text: 'Bronze 1',
uri: 'https://lolyama.com/wp-content/uploads/2018/11/Season_2019_-_Bronze_1.png',
},
{
id: '2',
text: 'Bronze 2',
uri: 'https://lolyama.com/wp-content/uploads/2018/11/Season_2019_-_Bronze_1.png',
},
{
id: '3',
text: 'Bronze 3',
uri: 'https://lolyama.com/wp-content/uploads/2018/11/Season_2019_-_Bronze_1.png',
},
{
id: '4',
text: 'Bronze 4',
uri: 'https://lolyama.com/wp-content/uploads/2018/11/Season_2019_-_Bronze_1.png',
},
{
id: '5',
text: 'Silver 1',
uri: 'https://img.rankedboost.com/wp-content/uploads/2014/09/Season_2019_-_Silver_1.png',
},
],
}]

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',

},
sectionHeader: {
fontWeight: '800',
fontSize: 18,
color: '#f4f4f4',
marginTop: 250,


},
item: {
margin: 10,
},
itemPhoto: {
width: 80,
height: 80,
borderRadius:50
},
itemText: {
color: 'black',
marginTop: 5,
marginLeft:15
},
itemSelected:{
},
itemUnselected:{
}
});

Answer 1

就我得到而言

<View style={[styles.item , selectedID = item.id ?
styles.itemSelected:styles.itemUnselected]}>

您正在将值分配给状态变量