Выполнение функции поиска для поиска внутри основного состояния - PullRequest
Новая
       21

Выполнение функции поиска для поиска внутри основного состояния

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

Я пытаюсь применить панель поиска. Пользователь запросил ввод и будет выполнять поиск внутри основного состояния для получения указанных c данных на основе идентификатора данных. Пользователь будет перемещен на showScreen для представления указанных c данных. Это два варианта: либо просмотреть основные доступные данные, либо выполнить поиск, используя bar

** Как я могу сделать это, либо выделив данные, чтобы он нажимал и перемещался, либо получал идентификатор и управлял им напрямую? **

это мой код 

import React, {useState, useEffect} from 'react';
import {View, 
        Text, 
        StyleSheet, 
        FlatList , 
        TouchableOpacity, 
        ImageBackground, 
        Dimensions
    } from 'react-native';
import {Input} from 'react-native-elements';
import Spacer from '../compnents/Spacer';
import PlaySound from '../PlaySound';
import myApi from '../API/myApi';
import Lalezar from '../Fonts/Lalezar';
import {FontAwesome} from '@expo/vector-icons';
import { navigate } from '../NavigationRef';



const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

const DataListScreen = ({navigation}) => {

    const [state, setState] = useState();
    const [term, setTerm] = useState('');

    const myData = async () => {
        const response = await myApi.get('/arabic');
        setState(response.data);
    };

    useEffect(() => {
        myData();
    }, []);


        const searchData = state;
        const searchResults = () => {
        searchData.find(t => t.id === id);
        setTerm(term.id);
        const id = term.find(t => t.id === id);
        navigate('Show' , {id});
        console.log(term);
        }


     return (
        <View style={styles.container}>
        <ImageBackground source = {require('../../assets/Featured_5_rvdq97.jpg')}
        style = {styles.backGround}
        />
        <View style = {styles.searchBar} >
            <FontAwesome name = 'search' size = {25} style = {{marginLeft : 30, marginTop : 5}}/>
            <Input 
            inputStyle = {styles.searchInput}
            placeholder = 'بحث'
            placeholderTextColor = 'white'
            value = {term}
            onChangeText = {setTerm}
            onEndEditing = {searchResults}
            />
        </View>
             <View style = {{position : 'absolute'}}>
            <Lalezar title = {'List of All Data '} 
            style = {styles.textHead}
            />
            </View>
            <Spacer />
            <FlatList 
            showsVerticalScrollIndicator = {false}
            data = {state}
            numColumns = {2}
            keyExtractor = {(state) => state.id}
            style = {styles.flatList}
            renderItem = {({item}) => {
                return (
                    <View style = {styles.bigContainer}>
                    <TouchableOpacity 
                    onPress ={() => navigation.navigate('Show' , {
                        title : item.title, id : item.id, content : item.content
                    })}>
                    <View style= {styles.listContainer}>
                        <Text style = {styles.textList}>   {item.title} </Text>

                    <Spacer />
                    <PlaySound link = {item.audio_url} 
                        style = {styles.sound}
                        />
                    </View>

                    </TouchableOpacity>
                    </View>
                );
            }}
            />
        </View>
    );
};



const styles = StyleSheet.create({
    container : {
        backgroundColor : '#d2d6d5',
        alignContent : 'center'
    },
    bigContainer : {
        flex : 1,
        alignItems: 'center',
        borderWidth : 1,
        borderRadius : 7,
        margin : (SCREEN_WIDTH / 80),
        marginHorizontal : (SCREEN_WIDTH / 75),
        height : (SCREEN_HEIGHT / 6)
    },  
    textList : {
        fontSize : (SCREEN_WIDTH / 28),
        fontWeight : 'bold',
        margin : (SCREEN_HEIGHT / 75)
    },
    textHead : {
       marginLeft : 50
    },
    backGround : {
        width : SCREEN_WIDTH,
        height : (SCREEN_HEIGHT / 5),
        opacity : 0.7
    },
    flatList : {
        marginTop : -(SCREEN_HEIGHT / 15),
    },
    searchBar : {
        flex : 1,
        flexDirection : 'row',
        position : 'absolute',
        marginTop : 60,
        marginLeft : 12,
        borderWidth : 2,
        borderRadius : 7,
        height : 45,
        justifyContent : 'center',
        marginRight : 40
    },
    searchInput : {
        alignSelf : 'center',
        marginRight : 25,
        color : 'blue',
        fontSize : 25,
        fontWeight : 'bold',
    }
});


export default DataListScreen;

1 Ответ

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

Эта функция хорошо работает 

   const searchTitle = () => {
        const results = state.values();
        for (const value of results) {
           if (value.title == term) {
             setVlaue(results);
             console.log(value);

            const id = value.id;
            const title = value.title;
           navigate('Show', {id, title});
           }
        }    
    }

, а затем в тегах панели поиска 

<View style = {styles.searchBar} >
            <FontAwesome name = 'search' size = {25} style = {{marginLeft : 30, marginTop : 5}}/>
            <Input 
            inputStyle = {styles.searchInput}
            placeholder = 'بحث'
            placeholderTextColor = 'white'
            value = {term}
            onChangeText = {setTerm}
            onEndEditing = {searchTitle}
            />
...