проблема навигации параметры реагировать навигация V.5 - PullRequest
0 голосов
/ 10 июля 2020

Я создал себе компонент 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...