React native React本机Flatlist单选渲染错误只读

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,

您好,我正在尝试创建一个单选平面列表。用户将从这里选择游戏联盟中的他/她,但我有一个错误。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:{

  }
});
就我所知


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

我该怎么办我是react native的新手您能更具体一些吗请从样式中删除状态变量赋值,而使用类似fontWeight:variableToCompare的语法?粗体:正常