Фильтрация изображений с помощью панели поиска - PullRequest
Новая
       4

Фильтрация изображений с помощью панели поиска

1 голос
/ 24 февраля 2020

Я пытаюсь создать панель поиска для фильтрации изображений, отображаемых на SearchScreen.js. Пользователь вводит имя изображения, а затем изображение фильтруется. Каждое изображение будет иметь имя ключа, которое позволит пользователю искать их.

const listItems = ['A', 'B', 'C', 'D', 'E', 'F'] содержит список этих ключей. Я хочу, чтобы каждый был приписан для каждого отдельного изображения. Например: первое изображение получает ключ «А». Поэтому, когда кто-то хочет найти первое изображение, он ищет «А», чтобы найти его.

Это полный SearchScreen.js код: 

import React, {useState, useEffect} from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, FlatList, Keyboard, Image, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';

const listItems = ['A', 'B', 'C', 'D', 'E', 'F']

function SearchScreen({navigation}) {

  return (
    <View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <View>
      <Icon name={"ios-search"} style={styles.icon}/>
    </View>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </Animatable.View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity onPress={() => navigation.navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('nos')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
</View>
  );
}

SearchScreen.navigationOptions = {
  title: 'Procurar',
};

const styles = StyleSheet.create({
 /Irrelevant
});

export default SearchScreen;

Не могли бы вы мне помочь?

...