Реагируйте Навигация v5. Поток данных заголовка StackScreen и компонента StackScreen - PullRequest
Новая
       10

Реагируйте Навигация v5. Поток данных заголовка StackScreen и компонента StackScreen

0 голосов
/ 12 апреля 2020

Приложение My React Native имеет компонент панели поиска в заголовке Stack.Screen (React Navigation v5), который содержит лог c, для которого требуются данные из компонента ProductsList. Есть ли способ передать данные из заголовка стекового экрана в компонент и наоборот?

Вот мой StackNavigator 

<Stack.Navigator>
      <Stack.Screen
        name="My App Name"
        component={Dashboard}
      />
      <Stack.Screen
        name="Products"
        component={ProductsScreen}
        options={{headerRight: (props) => <Searchbar {...props} />}}
      />
</Stack.Navigator>

Панель поиска с фильтрацией логи c 

const Searchbar = () => {
  const [search, setSearch] = useState('');
  const [dataSource, setDataSource] = useState('');

  const searchFilterFunction = (text) => {
    const newData = props.items.filter((item) => {
      const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });

    setSearch(text);
    setDataSource(newData);
  };

  return (
    <View>
      <SearchBar
        onChangeText={(text) => searchFilterFunction(text)}
        onClear={(text) => searchFilterFunction('')}
        placeholder="Type Here..."
        value={search}
        platform="android"
        cancelIcon={false}
        placeholder="Search..."
      />
    </View>
  );
};

И компонент 

const ProductsList = (props) => {
  return (
    <View>
      <FlatList
        data={props.dataSource}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => (
          <TouchableOpacity
            style={styles.listItem}
            keyExtractor={item.id}
            onPress={() =>
              props.navigation.navigate('Detailed Info', {
                name: item.name,
                latinName: item.latinName,
                latinNameSynonyms: item.latinNameSynonyms,
                images: item.images,
                description: item.description,
              })
            }>
            <Image style={styles.image} source={{uri: item.images[0].thumb}} />
            <Text style={styles.text}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

Все работает просто хорошо, если я помещаю панель поиска в функцию ProductsList, но мне нужно, чтобы панель поиска была встроена в заголовок, и я не смог найти никаких возможных решений в документации

...