>

코드를 수정하여 질문을 다시 게시합니다. 항목 목록에서 선택한 항목에 대해 특정 스타일을 설정해야합니다. 내 코드는 :

constructor (props) {
    super(props)
    this.state = {
      selectedIndex: null
    }
  }
<FlatList
                data={this.state.data}
                renderItem={({ item, index }) => (
                  <ListItem
                    leftAvatar={{ source: { uri: item.avatar } }}
                    title={`${item.firstName} ${item.lastName}`}
                    // subtitle={item.email}
                    chevron
                    onPress={() => {
                      this.setState({
                        selectedIndex: index
                      })
                      console.log('####################')
                      console.log(this.state.selectedIndex)
                      console.log(index)
                      console.log('####################')
                    }}
                    containerStyle={
                      this.state.selectedIndex === index
                        ? styles.active
                        : styles.inactive
                    }
                  />
                )}
                keyExtractor={item => item.email}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
              />

콘솔에서 테스트했을 때 그 값을 얻었습니다 :

####################
####################
2
3
####################
####################
3
0
####################
####################
0
1
####################
####################
1
2
####################
####################
2
3
####################
####################
3
4
####################
####################
4
5
####################
####################
5
6
####################
####################
6
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
2
####################
####################
2
2
####################

항목을 누를 때 selectedIndex 상태가 색인 값을 얻었지만 구성 요소가 다시 렌더링되지 않는 스타일을 편집 할 수 없습니다.

내 스타일은 :

const styles = StyleSheet.create({
  active: {
    backgroundColor: 'green'
  },
  inactive: {
    backgroundColor: 'grey'
  }
})

selectedIndex가 index와 같지만 작동하지 않는 경우 활성 클래스를 적용해야합니다


  • 답변 # 1

    this.state.selectedIndex 를 추가해야합니다   extraData 에   FlatList 의  컴포넌트를 다시 렌더링합니다.

    <FlatList
        data={this.state.data}
        renderItem={({ item, index }) => (...)}
        extraData={this.state.selectedIndex}
    />
    
    

    참조 용 문서를 참조하십시오.

  • 답변 # 2

    플랫리스트에서 setState를 자체 함수로 추출하려고 시도했습니다. 나는 onPress 내부에서 setState를 호출하지 않을 것입니다 (스포일러 : 비동기 함수입니다).

    setState 호출은 동 기적이지 않습니다. "보류 상태 전환"을 만듭니다. 발생한 이벤트의 일부로 새 입력 값을 명시 적으로 전달해야합니다.

    setIndex라는 새로운 함수를 만들고 로직을 넣었습니다.

    setIndex = async (index) => {
      await this.setState({
        selectedIndex: index
    })
    
    

    그리고 onPress에서 사용하십시오 :

    onPress={() => setIndex(index)}
    
    

관련 자료

  • 이전 typescript - 이 유형 가드는 왜이 삼항식에서 작동하지 않습니까?
  • 다음 ios - 검색이 활성화 된 동안 didSelectRowAt indexPath 함수가 작동하지 않습니다