Поиск изображений с помощью SearchBar - PullRequest
Новая
       5

Поиск изображений с помощью SearchBar

0 голосов
/ 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;

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

...