Как создать экран фильтра с реактивной поиск-родной? - PullRequest
Новая
       106

Как создать экран фильтра с реактивной поиск-родной?

0 голосов
/ 22 января 2020

Это невероятно простая в использовании библиотека для создания пользовательского интерфейса на основе ElasticSearch, но я не могу найти, как этого добиться. Я хочу предоставить пользователям возможность создавать фильтры на основе многих атрибутов моего индекса, и потребуется много места на моем экране.

Поскольку использование предполагает добавление компонента React Base на экран, а затем все остальные компоненты внутри этого я не могу понять, как это сделать.

https://docs.appbase.io/docs/reactivesearch/native/overview/ReactiveBase/

<ReactiveBase
  app="appname"
  credentials="abcdef123:abcdef12-ab12-ab12-ab12-abcdef123456">
    <Component1 .. />
    <Component2 .. />
</ReactiveBase>

Как я используя act-native-paper , моя последняя попытка была поместить все мои фильтры в компонент Portal , намереваясь использовать окно Modal для отображения фильтров. Но только размещение портала приводит к ошибке. 

import React from 'react'
import PropTypes from 'prop-types'
import { View, Image, TouchableOpacity } from 'react-native'
import { Provider,  Portal, Appbar, TextInput, Button, Text, Surface, Snackbar } from 'react-native-paper'
// import { styles } from './styles'
import { ReactiveBase, ReactiveList, SelectedFilters, DataSearch, DateRange } from '@appbaseio/reactivesearch-native'

const HomeScreen = props =>
<Provider>
    <View>
        <Appbar.Header>
            <Appbar.Content
                title="My App"
            />
        </Appbar.Header>
        <View style={{ margin: 5, backgroundColor: 'red' }}>
            <View style={{ backgroundColor: 'red', flexGrow: 1, flexDirection: 'row' }}>
                <ReactiveBase
                    app="app id"
                    credentials="app key">
                    <Portal>
                    <View>
                        <SelectedFilters showClearAll={true} clearAllLabel="Limpar" />   
                    </View>
                    <View>
                        <DataSearch 
                            componentId="Pesquisar" 
                            showFilter={true}
                            dataField={['title', 'plain', 'short']} 
                            placeholder="Pesquisar" />
                    </View>               
                    <View>
                        <DateRange 
                            componentId="Publicação" 
                            showFilter={true}
                            highlight={true}
                            dataField="time"                            
                            placeholder="Data de publicacao" />
                    </View>  
                    </Portal>                           
                    <View>
                        <ReactiveList
                        componentId="Resultado"
                        infiniteScroll={true}      
                        // pagination={true}
                        // size={10}
                        dataField="time"
                        sortBy="desc"
                        loader="Carregando..."
                        showLoader={true} 
                        showResultStats={false}
                          react={{
                              and: ['Pesquisar', 'Publicação'],
                        }}
                        onData={(res) => {
                            if(res._type="blog") {
                                return <View>
                                            <Text>{res.title}</Text>
                                        </View>
                            }
                            console.log(res)
                        }} />
                    </View>                 
                </ReactiveBase>        
            </View>            
        </View>
    </View>   
</Provider>

export { HomeScreen as default }

enter image description here

У кого-нибудь есть опыт, делающий это? Любая помощь будет оценена!

...