홈>
코드를 수정하여 질문을 다시 게시합니다. 항목 목록에서 선택한 항목에 대해 특정 스타일을 설정해야합니다. 내 코드는 :
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
- 답변 # 2
플랫리스트에서 setState를 자체 함수로 추출하려고 시도했습니다. 나는 onPress 내부에서 setState를 호출하지 않을 것입니다 (스포일러 : 비동기 함수입니다).
setState 호출은 동 기적이지 않습니다. "보류 상태 전환"을 만듭니다. 발생한 이벤트의 일부로 새 입력 값을 명시 적으로 전달해야합니다.
setIndex라는 새로운 함수를 만들고 로직을 넣었습니다.
setIndex = async (index) => { await this.setState({ selectedIndex: index })
그리고 onPress에서 사용하십시오 :
onPress={() => setIndex(index)}
관련 자료
- multipleselection - React Native의 목록에서 선택한 여러 항목을 표시하는 방법
- promise - 맵 및 디스플레이로 네이티브 핸들 중첩 객체 반응
- javascript - Expo React Native에서 여러 확인란 처리
- 두 요소 React Native 사이의 거리를 어떻게 찾을 수 있습니까?
- javascript - prop을 탐색 화면 구성 요소에 전달하는 방법 - 네이티브 반응
- reactjs - React Native에서 플랫리스트의 매개 변수 업데이트
- Alertalert는 React 네이티브 iOS에서 작동하지 않지만 Android에서는 완벽하게 작동합니다
- React Native에서 컨텍스트에 액세스
- React Native로 CameraRoll iOS에서 오는 PHAsset의 경로 가져 오기
- javascript - react native - selecteddaysincludes는 함수가 아닙니다
- javascript - 마커를 누르면 네이티브 맵이 다시 렌더링됩니다
- javascript - React는 맵 기능에서 요소를 렌더링하지 않습니다
- React Native의 3 개 버튼에서 하나의 버튼 선택
- javascript - react native - 커뮤니티에서 날짜 시간 선택기를 사용하고 있으며 시간을 gmt + 0으로 변환하고 있습니다
- React 네이티브 앱이 백그라운드에 있거나 장치가 잠금 상태 일 때 socketio가 연결 해제되는 것을 방지하는 방법은 무엇입니까?
- xcode - 코드 변경 후 React Native 063이 mainjsbundle을 업데이트하지 않음
- reactjs - 단일 함수를 버튼 클릭 한 후에 만 React Native에서 함수를 실행하려면 어떻게해야합니까?
- javascript - React Native에서 콘텐츠를 구성하는 방법을 모르겠습니다
- javascript - typeerror - elementsetattribute가 함수가 아닙니다 (react native/threejs)
- javascript - React Native Firebase 자동 문서 ID를 1 씩 늘리는 방법
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- JavaScript 변수를 HTML div에 '출력'하는 방법
- python - 문자열에서 특정 문자 제거
this.state.selectedIndex
를 추가해야합니다extraData
에FlatList
의 컴포넌트를 다시 렌더링합니다.참조 용 문서를 참조하십시오.