Как создать панель поиска с фильтром с избыточной формой в нативной реакции, запрашивая информацию из облака, то есть запросить JSON? - PullRequest
Новая
       30

Как создать панель поиска с фильтром с избыточной формой в нативной реакции, запрашивая информацию из облака, то есть запросить JSON?

0 голосов
/ 11 февраля 2019

Я хочу создать панель поиска с избыточной формой, чтобы при записи я фильтровал имена, содержащиеся в файле json, используя выборку.До сих пор я отправлял данные, находящиеся в textInput, в редуктор хранилища, но я не знаю, как применить функцию для фильтрации этих данных и отображения имен json. Это мой код: 

import React, { Component } from "react";
import {
    View,
    TextInput,
    StyleSheet,
    Button,
} from "react-native";

import { Field, reduxForm } from 'redux-form';

import { connect } from 'react-redux';

const ScreenFormHome = (props) => (
    <View>
        <Field name="Search" component={fieldNombre} ph="Search Champs" />
        <Field name="Text" component={fieldNombre} ph="Enter Text" />
        <Button title="Send Dispatch" onPress={props.handleSubmit((values) => props.SendDispatch(values))} />
    </View>
);


const fieldNombre = (props) => (

    <View style={styles.textInput}>
        <TextInput
            placeholder={props.ph}
            onChangeText={props.input.onChange}
            value={props.input.value}
            autoCapitalize="none"
            onBlur={props.input.onBlur}
        />
        <View style={styles.linea} />
    </View>
);

const styles = StyleSheet.create({
    textInput: {
        marginBottom: 16,
    },
    linea: {
        backgroundColor: '#DCDCDC',
        height: 2,
    },
});


const mapDispatchToProps = (dispatch) => {
    return {
        SendDispatch: (values) => {
            if (values.Text) {
                dispatch({ type: 'ACTION_TYPE', Text: values.Text })
            } else {
                dispatch({ type: 'ACTION_TYPE', Text: 'Enter a text for show only value' })
            }

            if (values.Search) {
                dispatch({ type: 'ACTION_SEARCH', Search: values.Search })
            } else {
                dispatch({ type: 'ACTION_SEARCH', Search: 'Enter a text for show the Search' })
            }
        }
    }
}
const mapStateToProps = (state) => {
    return {
        //  Text: state.reducerSearch
    }
}

export default reduxForm({
    form: 'ScreenFormHome',
})(connect(mapStateToProps, mapDispatchToProps)(ScreenFormHome));

и этот из магазина 

    import { createStore, combineReducers } from 'redux';

import { reducer as form } from 'redux-form'

const reducerText = (state = [], action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            return (action.Text)
        default:
            return state;
    }
};

const reducerSearch = (state = [], action) => {
    switch (action.type) {
        case 'ACTION_SEARCH':
            return (action.Search)

        default:
            return state;
    }
}

const Reducers = combineReducers({
    reducerText,
    reducerSearch,
    form
})

const Store = createStore(Reducers)

export default Store;
...