나는 React Native를 처음 접했고 FlatList 에서이 문제가 발생하여 사용하는 데이터 소스를 업데이트하고 자체적으로 업데이트하고 싶습니다. 내 케이스에는 FlatList로 표시하고 싶은 항목 목록이 있으며 각 항목을 선택할 수 있습니다. 내가 본 대부분의 예는 구성 요소를 사용하고 있으며 제안은
state
...에
extraData
이 문제를 해결하기 위해. 그러나 나는 순수한 구성 요소를 사용하고 있으며이 경우 해결책이 있는지 확인하려고합니다. 내가 만든 샘플 프로젝트에 따라. 이 예에서는 언론이 발생합니다.
data
업데이트되었지만 FlatList는
data
변화.
import { findIndex } from 'lodash'
import React, { useState } from 'react'
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar,
FlatList,
Pressable,
} from 'react-native'
import {
Colors,
} from 'react-native/Libraries/NewAppScreen'
var array = require('lodash/array')
const App = () => {
const [data, setData] = useState([
{
name: "Foo",
id: '1',
isSelected: false
},
{
name: "Boo",
id: '2',
isSelected: false
},
{
name: "Koo",
id: '3',
isSelected: false
},
{
name: "Poo",
id: '4',
isSelected: false
},
{
name: "Too",
id: '5',
isSelected: false
},
{
name: "Qoo",
id: '6',
isSelected: false
},
])
const tappedItem = (item) => {
const itemIndex = data.findIndex((i) => i.id == item.id)
const newItem = data[itemIndex]
newItem.isSelected = !newItem.isSelected
data[itemIndex] = newItem
setData(data)
}
const renderItem = (item) => {
return (
<Pressable onPress={() => tappedItem(item.item)}>
<View style={[styles.sectionContainer, { backgroundColor: item.item.isSelected ? 'pink' : 'lightgray' }]}>
<Text style={styles.sectionTitle}>{item.item.name}</Text>
</View>
</Pressable>
)
}
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={styles.body}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={renderItem}
extraData={data}
/>
</View>
</SafeAreaView>
</>
)
}
const styles = StyleSheet.create({
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
})
export default App
- 답변 # 1
관련 자료
- reactjs - React Native에서 플랫리스트의 매개 변수 업데이트
- reactjs - React Native는 상태를 업데이트하지 않습니다
- reactjs - 네이티브 반응 - 내 예제에서 클래스 구성 요소를 함수 구성 요소로 변경하는 방법은 무엇입니까?
- reactjs - React Native에서 키보드를 열 때 화면의 모든 구성 요소를 위로 이동하는 방법은 무엇입니까?
- react native - 렌더링에서 반환 된 구성 요소가 없습니다 (uikitten)
- React Native의 구성 요소 예외
- React Native Flatlist는 다른 페이지로 이동
- javascript - prop을 탐색 화면 구성 요소에 전달하는 방법 - 네이티브 반응
- javascript - React 네이티브 앱이 구성 요소를 렌더링하지 않습니다
- reactjs - 네이티브 반응 - 소비자의 컨텍스트 업데이트는 처음에만 작동합니다
- reactjs - React Native는 구성 요소 소품에 액세스 할 수 없습니다
- hook - React Native로 언론에 SVG 구성 요소 변경
- 기본 스크롤을 플랫리스트 onChangeText의 맨 위로 반응
- javascript - React Native에서 Flatlist를 사용하여 데이터가 렌더링되지 않습니다
- React native flatlist - react 네이티브 플랫리스트 - 보낸 메시지와받은 메시지 구분
- 기본 반응은 FlatList 항목의 일부를 조건부로 렌더링합니다
- reactjs : 반응 네이티브 구성 요소의 이미지
- responsive design - React Native에서 동적으로 구성 요소 만들기
- multipleselection - React Native의 목록에서 선택한 여러 항목을 표시하는 방법
최종 출력 :
FlatList 항목의 선택 및 선택 취소를 구현하는 방법은 다음과 같습니다.
전체 작업 데모 : Expo Snack