Я создал себе компонент SingleSelectList, который показывает мне список элементов
[введите описание изображения здесь] [1]
/* 2. Get the param */
const { items, selected } = route.params
const keysItem = items.length > 0 ? Object.keys(items[0])[1] : ''
// state
const [value, setValue] = useState('')
const [datas, setDatas] = useState(items)
// copy the state and filter the data
const filtered = value ? datas.filter((x) => x[keysItem].includes(value)) : datas
const selectedUser = datas.filter(x => x.checked)
// checks whether the user has changed his or her data
const compareDatas = JSON.stringify(selected) === JSON.stringify(selectedUser)
const checkItems = useCallback((item) => {
const { id } = item
const copy = [...datas]
const index = copy.findIndex((x) => x.id === id)
if (copy[index].checked === false) {
copy[index].checked = true
copy.filter((x) => x.id !== item.id).map((y) => y.checked = false)
} else {
copy[index].checked = false
}
setDatas(copy)
}, [])
return (
<View style={styles.container}>
<RenderSearchBar onChangeText={(text) => { setValue(text) }} value={value} setValue={value} />
{
filtered.length > 0
? <RenderList filtered={filtered} keysItem={keysItem} datas={datas} checkItems={checkItems} />
: <RenderNoResult />
}
<RenderButton compareDatas={compareDatas} selectedUser={selectedUser} navigation={navigation} />
</View>
)
}
// Components
const RenderSearchBar = ({ value, onChangeText }) => (
<SearchBar
lightTheme
containerStyle={styles.containerSearchbar}
inputContainerStyle={styles.inputSearchbar}
placeholder='Search'
value={value}
onChangeText={onChangeText}
/>
)
const RenderList = ({ filtered, keysItem, onPress, checkItems }) => (
<FlatList
refreshing
data={[...filtered]}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<RenderItem
keysItem={keysItem}
checked={item.checked}
item={item}
onPress={onPress}
checkItems={checkItems}
/>
)}
/>
)
const RenderItem = memo(({ item, name, keysItem, checked, checkItems }) => (
<>
<TouchableHighlight activeOpacity={0.1} underlayColor='rgba(0, 0, 0 , 0.5)' onPress={() => checkItems(item)} style={styles.titleList}>
<>
<CheckBox
name={name}
checkedIcon='circle'
uncheckedIcon='circle-o'
containerStyle={styles.containerCheckbox}
checked={checked}
checkedColor='green'
/>
<Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>{item[keysItem]}</Text>
</>
</TouchableHighlight>
<Divider style={styles.divider} />
</>
))
const RenderButton = ({ navigation, compareDatas, selectedUser }) => (
<View style={styles.containerButton}>
<Button
disabled={compareDatas}
title='Enregistrer'
onPress={() => navigation.navigate('React animation', { selectedUser })} />
</View>
)
const RenderNoResult = () => (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, color: 'gray' }}>Aucun résultat trouvé :(</Text>
</View>
)
export default SingleSelectList
, когда я нажимаю на кнопка сохранения перенаправляет меня на мой предыдущий экран с выбором, я отправляю выбор в параметрах
onPress={() => navigation.navigate('React animation', { selectedUser })} />
на моем предыдущем экране я получаю настройки.
const carPrestationSelection =route.params?.selectedUser ? route.params.selectedUser[0]?.title : false
const fruit =route.params?.selectedUser ? route.params.selectedUser[0]?.title : false
если у меня их несколько выбор Я всегда получаю одни и те же параметры, спасибо [1]: https://i.stack.imgur.com/9PTLO.png