react-native - React Native Flatlist 单选渲染错误只读

问题描述

您好，我正在尝试制作单选平面列表。用户将从这里选择他/她在游戏联赛中，但我遇到错误。“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-nativereact-native-flatlistreadonly

react-native - React Native Flatlist 单选渲染错误只读

问题描述

解决方案

推荐阅读