Question

我正在尝试创建一个搜索栏以过滤SearchScreen.js上显示的图像。用户键入图像的名称，然后对图像进行过滤。每个图像都将具有一个键名，该键名将允许用户搜索它们。

const listItems = ['A', 'B', 'C', 'D', 'E', 'F']包含这些键的列表。我希望为每个不同的图像分配一个图像。例如：第一个图像接收键“ A”。因此，只要有人想找到第一张图片，他们就会搜索“ A”来找到它们。

这是完整的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;

能帮我吗？

使用搜索栏过滤图像

0 个答案: