Как получить доступ к указанному c индексу FlatList в реагировать на нативный - PullRequest
Новая
       4

Как получить доступ к указанному c индексу FlatList в реагировать на нативный

0 голосов
/ 12 января 2020

Я заполняю FlatGrid из API. Каждая сетка имеет значок, который по умолчанию имеет зеленый цвет. Я хочу изменить цвет определенного значка c при нажатии. Но на данный момент после нажатия иконки цвет всех иконок меняется. Кто-нибудь может подсказать, что нужно сделать? Прикрепление кода для справки. После нажатия иконки зеленый цвет должен превратиться в синий. 

    constructor(props){
        super(props);
        this.state={
          isLoading: true,
          dataSource: null,
          color:'green'
        }
      }


    colorChange(color)
        {

          if(color=='green')
          {
            this.setState({
              color:'blue'
            })
          }
          else
          {
            this.setState({
              color:'green'
            })
          }
        }

        render(){

          if(this.state.isLoading){
            return (
              <View style={styles.container}>
                <ActivityIndicator size="large" />
              </View>
            )
          }else{
            console.log(this.state.dataSource)

            return(
              <ScrollView>
                <FlatGrid 
                      itemDimension={130}
                      items={this.state.dataSource}
                      style={styles.gridView}
                      renderItem={({ item, index }) => (

                          <View style={{borderWidth:1,borderStyle:'dashed',borderRadius:1,width:120,height:50,flexDirection:'row'}}>
                            <Text style={{fontSize:20,paddingLeft:10}}>{item.Name}</Text>

                            <Icon 
                                name="car" 
                                size={30} 
                                key={item.Name}
                                style={{color:(item.Status=='Available'?this.state.color:'grey'),paddingLeft:20,backgroundColor:'white'}}
                                onPress={this.colorChange.bind(this.state.color)}

                            />



                          </View>


                    )}
                    keyExtractor={item => item.Name}

                  />



                  </View>

1 Ответ

0 голосов
/ 12 января 2020

Вы можете создать массив цветов, но это не очень хорошая практика.

Другое решение - обрабатывать renderItem как функциональный компонент, так как он работает.

Вот так 

renderItem={({ item, index }) => {
const [color, setColor] = React.useState('green')
return(

                      <View style={{borderWidth:1,borderStyle:'dashed',borderRadius:1,width:120,height:50,flexDirection:'row'}}>
                        <Text style={{fontSize:20,paddingLeft:10}}>{item.Name}</Text>

                        <Icon 
                            name="car" 
                            size={30} 
                            key={item.Name}
                            style={{color:(item.Status=='Available'?color:'grey'),paddingLeft:20,backgroundColor:'white'}}
                            onPress={() => setColor('blue')}

                        />



                      </View>


                )}}
...