React native React本机Flatlist单选渲染错误只读
您好,我正在尝试创建一个单选平面列表。用户将从这里选择游戏联盟中的他/她,但我有一个错误。selectedID是只读的。我希望他们选择联盟,并将有一个保存按钮。我看不到我缺少的内容。我研究了它,但找不到任何帮助React native React本机Flatlist单选渲染错误只读,react-native,react-native-flatlist,readonly,React Native,React Native Flatlist,Readonly,您好,我正在尝试创建一个单选平面列表。用户将从这里选择游戏联盟中的他/她,但我有一个错误。selectedID是只读的。我希望他们选择联盟,并将有一个保存按钮。我看不到我缺少的内容。我研究了它,但找不到任何帮助 import React , {useState} from 'react'; import { StyleSheet, Text, View, SectionList, SafeAreaView, Image, FlatList, StatusBar,
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:{
}
});
就我所知
您正在将值分配给状态变量我该怎么办我是react native的新手您能更具体一些吗请从样式中删除状态变量赋值,而使用类似fontWeight:variableToCompare的语法?粗体:正常