Как установить звезду и снять звезду с изображения на touchableOpacity в реагирующем - PullRequest
Новая
       60

Как установить звезду и снять звезду с изображения на touchableOpacity в реагирующем

0 голосов
/ 25 февраля 2020

Мне нужно пометить и снять звездочку с элемента Flatlist.

Здесь я использовал Flatlist и renderItem внутри класса. Использовал константу вне класса и включен в renderItem.

(то есть) 

structure.js is like below




 imports...

    const starred =
               <TouchableOpacity
                      onPress={() => {
                        console.log('Long Press')
                      }}
                      delayLongPress={3000}>
                      <FontAwesome5 style={{marginHorizontal: 0}} name="star" size={12} color="#grey"/>
                </TouchableOpacity>

    class star extends React.componenet{

    renderItem = ({item}) => {
       return (<Starred onPress= {}
       />)
    }

    render(){
    <Flatlist 
    renderItem= {this.renderItem}
    />   
    }
   }

Вот как я могу установить setState при нажатии в TouchableOpacity здесь.

Необходимо изменить Звезда до зеленого цвета на прессе

enter image description here

1 Ответ

0 голосов
/ 25 февраля 2020

Сначала есть 2 способа сделать это

1-й способ: либо при каждом щелчке звезды вы вызываете API, а затем обновляете конкретный объект в массиве, и изображение звезды определяется внутренней переменной данных, может быть вызывается isStarred:true

и если isStarrted?<ShowStarSelectedImage />:<ShowStarUnSelectedImage /> в вашей функции рендеринга

или

, сначала создав массив длины массива плоских списков данных, и первоначально установив как: 

starArray = ([...Array(sizeOfFlatList).keys()].map(x => 0);) ;

И это создаст массив от 0 до размера плоского списка.

Теперь по щелчку звезды вы можете просто взять его индекс: 

onPress = {() => {starArray[index] = 1 // or you can toggle accordingly.}

Надежда помогает. не стесняйтесь сомнений

...