• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

tuantle/react-native-search-header: Easy to use React Native search header compo ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

tuantle/react-native-search-header

开源软件地址(OpenSource Url):

https://github.com/tuantle/react-native-search-header

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

react-native-seach-header

npm version npm downloads

Easy to use React Native search header component based on material design patterns.

demo

Installation

$ npm install react-native-search-header --save

Example

To use search header you simply import the component factory function to create a renderable component:

import React from 'react';
import {
    Dimensions,
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';
import SearchHeader from 'react-native-search-header';

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#f5fcff'
    },
    status: {
        zIndex: 10,
        elevation: 2,
        width: DEVICE_WIDTH,
        height: 21,
        backgroundColor: '#0097a7'
    },
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        width: DEVICE_WIDTH,
        height: 56,
        marginBottom: 6,
        backgroundColor: '#00bcd4'
    },
    label: {
        flexGrow: 1,
        fontSize: 20,
        fontWeight: `600`,
        textAlign: `left`,
        marginVertical: 8,
        paddingVertical: 3,
        color: `#f5fcff`,
        backgroundColor: `transparent`
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 130,
        height: 40,
        marginTop: 40,
        borderRadius: 2,
        backgroundColor: `#ff5722`
    }
});

const Demo = () => {
    const searchHeaderRef = React.useRef(null);
    return (
        <View style = { styles.container }>
            <StatusBar barStyle = 'light-content' />
            <View style = { styles.status }/>
            <View style = { styles.header }>
                <Text style = { styles.label }> Demo </Text>
                <Button
                    title = 'Search'
                    color = '#f5fcff'
                    onPress = {() => searchHeaderRef.current.show()}
                />
            </View>
            <SearchHeader
                ref = { searchHeaderRef }
                placeholder = 'Search...'
                placeholderColor = 'gray'
                pinnedSuggestions = {[ `react-native-search-header`, `react-native`, `javascript` ]}
                onClear = {() => {
                    console.log(`Clearing input!`);
                }}
                onGetAutocompletions = {async (text) => {
                    if (text) {
                        const response = await fetch(`http://suggestqueries.google.com/complete/search?client=firefox&q=${text}`, {
                            method: `get`
                        });
                        const data = await response.json();
                        return data[1];
                    } else {
                        return [];
                    }
                }}
            />
            <View style = { styles.button }>
                <Button
                    title = 'Open Search'
                    color = '#f5fcff'
                    onPress = {() => searchHeaderRef.current.show()}
                />
            </View>
            <View style = { styles.button }>
                <Button
                    title = 'Clear'
                    color = '#f5fcff'
                    onPress = {() => {
                        searchHeaderRef.current.clear();
                    }}
                />
            </View>
        </View>
    );
}

AppRegistry.registerComponent('Demo', () => Demo);

Public Methods Access via Reference

These are methods that are accessible via "ref":

Methods description
isHidden Call to check if the SearchHeader is visible.
show Call to show the SearchHeader.
hide Call to hide the SearchHeader.
clear Call to clear the SearchHeader text input.
clearSuggestion Call to clear search suggestion list.

Props

Below are the props you can pass to the React Component to customize the SearchHeader.

Prop Type Default description
headerHeight string #5d5d5d Custom header bar height
headerBgColor string #5d5d5d Custom header background color
inputColor string #5d5d5d Search text input color
inputBgColor string transparent Search text input background color
placeholderColor string #bdbdbd Text input placeholder color
suggestionEntryColor string #bdbdbd Search suggestion text color
iconColor string #5d5d5d SearchHeader component icon button color
topOffset number 24 The offset above the SearchHeader component. Default to 24 (ios) or 0 (android)
dropShadowed boolean true Enable drop shadow styling
visibleInitially boolean false Set to false to hide and to true to show the SearchHeader component
autoFocus boolean true Enable text input auto focus when open
autoCorrect boolean true Enable text input autocorrect
persistent boolean false Enable persistent search
enableSuggestion boolean true When enabled, search suggestion list will be display accordingly
suggestionHistoryEntryRollOverCount number 16 The max number of search suggestion history items
pinnedSuggestions array [] An array of pinned search suggestions
placeholder string Search... A string placeholder when there is no text in text input
entryAnimation string from-left-side Set the direction of SearchHeader entry animation. Possible values are from-left-side, from-right-side
iconImageComponents: function Internal An array of custom icon image components for the buttons
onGetAutocompletions function None This function is called during search input change to get a string array of search autocompletions
onClear function None This function is called when text input is cleared
onSearch function None This function is called after return/done key is pressed. Return text input event
onEnteringSearch function None This function is called after text is entered/changed in text input. Return text input event
onFocus function None This function is called when text input in focused
onBlur function None This function is called when text input in blurred
onHide function None This function is called right after hide animation is completed
onShow function None This function is called right after show animation is completed

Style Overrides

SearchHeader component default style can be override. Below are examples of how to override each default style element.

<SearchHeader
	style = {{
		container: {
			...myContainerStyle
		},
		header: {
			...mySearchHeaderStyle
		},
		suggestion: {
			...mySearchSuggestionStyle
		},
		input: {
			...mySearchInputTextStyle
		},
		suggestionEntry: {
			...mySearchSuggestionEntryTextStyle
		},
		icon: {
			...myIconStyle
		}
	}}
/>

Change Log

Release Version 0.3.5 (09/09/2019)

    Notes:
    New Features:
        - Added support for new React Hooks.
    Breaking Changes:
    Improvements:
        - When enableSuggestion = true, suggestion view is visible when text input is focused and hidden when text input is blurred.
        - Removed componentDidUpdate for SearchHeaderWithReactClass.
    Bug fixes:

Release Version 0.3.4 (07/03/2019)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed a bug where hidden suggestion view is blocking other components from receiving touch events.

Release Version 0.3.3 (07/02/2019)

    Notes:
    New Features:
        - Added pin search entry suggestions
        - Updated dependencies to latest
    Breaking Changes:
    Improvements:
        - Changed suggestion visibility. It is now visible when search input is focused and hidden when blurred
        - Code cleanups
    Bug fixes:
        - Fixed history suggestion entry rollover
        - Fixed misc suggestion view issues

Release Version 0.3.2 (03/11/2019)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
        - Removed lodash dependency
        - Code cleanups
        - Fixed animations
        - Changed suggestion view style
    Bug fixes:

Release Version 0.3.1 (01/28/2019)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed style not overriding bug. #28, #30

Release Version 0.3.0 (11/13/2018)

    Notes:
        Updated compatibility to latest react native version 0.57
    New Features:
    Breaking Changes:
    Improvements:
        - Improved icon image components implementation.
    Bug fixes:
        - Fixed minor bugs for input placeholder.

Release Version 0.2.9 (09/10/2018)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
        - Updated lifecycle methods called to match latest react recommendations.
    Bug fixes:
        - Fixed TextInput lag issue.

Release Version 0.2.8 (08/30/2018)

    Notes:
        Updated compatibility to latest react native version 0.56
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed suggestion text display to have tail ellipsize if there are too many words in one line.
        - Fixed text input clearing issue.

Release Version 0.2.7 (04/09/2018)

    Notes:
        Updated compatibility to latest react native version 0.55.4
    New Features:
        - Added onClear callback when text input is cleared
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Add note to get clear method to work with react native 55.4.
        - Fixed no spacing for text entry in search suggestion box view.

Release Version 0.2.6 (03/19/2018)

    Notes:
        Updated compatibility to latest react native version 0.54.2
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed bug where clearing text input or if text input is empty will not close the suggestion view
        - Fixed documentation in README
            onHidden -> onHide
            onVisible -> onShow

Release Version 0.2.5 (02/05/2018)

    Notes:
        Updated compatibility to latest react native version 0.53.0
    New Features:
        Added onClearSuggesstion callback prop to clear suggestion history
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed topOffset spelling error.
        - Fixed key index warning in FlatList.

Release Version 0.2.4 (12/27/2017)

    Notes:
    New Features:
        Added  headerHeight prop
        Added  headerBgColor prop
    Breaking Changes:
    Improvements:
    Bug fixes:

Release Version 0.2.3 (11/26/2017)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Drop custom deepMerge in favor of lodash.merge

Release Version 0.2.2 (11/25/2017)

    Notes:
        - Updated to latest React Native version 0.50.4
        - Removed Hyperflow dependency as it is not needed.
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Resolving babel transform error. Hopefully...

Release Version 0.2.1 (10/17/2017)

    Notes:
        - Updated to latest React Native version
    New Features:
        - Added persistent search bar
        - iconImageComponents prop for easy custom button styling
    Breaking Changes:
        - No longer needed to do this const SearchHeaderView = SearchHeaderComponent()
          Just import and use as any react native component.
        - Renaming properties:
            searchInputTextColor -> inputColor
            placeholderTextColor -> placeholderColor
            searchSuggestionTextColor -> suggestionEntryColor
            statusHeightOffet -> topOffset
            searchSuggestionHistoryItemRollOverCount ->suggestionHistoryEntryRollOverCount
            dropShadow -> dropShadowed
            enableSearchSuggestion -> enableSuggestion
            onGetSearchAutocompletions -> onGetAutocompletions
            onSearchChange -> onEnteringSearch
            onHidden -> onHid
            onVisible -> onShow
    Improvements:
    Bug fixes:

Release Version 0.2.0 (09/08/2017)

    Notes:
        - Updated to latest React Native
        - updated to latest Hyperflow
    New Features:
    Breaking Changes:
    Improvements:
        - Added autoFocus prop
    Bug fixes:
        - Fixed FlatList missing list item "key" warning

Release Version 0.1.9 (05/27/2017)

    Notes:
        - Updated to latest React Native
    New Features:
    Breaking Changes:
    Improvements:
        - Used FlatList instead of ScrollView to render search suggestion list
    Bug fixes:
        - Fixed clearSearchSuggestion bug

Release Version 0.1.8 (05/17/2017)

    Notes:
    New Features:
    Breaking Changes:
        - Renamed property searchSuggestionItemRollOverCount to searchSuggestionHistoryItemRollOverCount
        - Renamed property onGetSearchSuggestions to onGetSearchAutocompletions
    Improvements:
        - Improved onGetSearchAutocompletions implementation
        - Added onGetSearchAutocompletions to example
    Bug fixes:

Release Version 0.1.7 (05/10/2017)

    Notes:
        - Updated package dependencies.
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:

Release Version 0.1.6 (02/16/2017)

    Notes:
    New Features:
        - Added isHidden and clear methods, accessible via "ref"
    Breaking Changes:
    Improvements:
    Bug fixes:
        - Fixed issues with onHidden and onVisible not firing.

Release Version 0.1.5 (01/27/2017)

    Notes:
    New Features:
    Breaking Changes:
    Improvements:
        - Improved search suggestion implementation. Matching it closer to other material design search implementations.
    Bug fixes:

Release Version 0.1.4 (01/26/2017)

    Notes:
    	- Update to latest hyperflow version.
    New Features:
        - New prop "entryAnimation" for setting SearchHeader entry animation direction.
    Breaking Changes:
    Improvements:
        - Added public methods access via "ref"
    Bug fixes:
        - Fixed react "refs" warning message.

Release Version 0.1.3 (01/25/2017)

Notes:
    	- Update to latest hyperflow version.
    New Features:
    Breaking Changes:
        - Props renaming:
            searchTextColor               -> searchInputTextColor
            searchSuggestionItemTextColor -> searchSuggestionTextColor
            searchVisibleInitially        -> visibleInitially
            onSearchBlur                  -> onBlur
            onSearchFocus                 -> onFocus
            onMinimized                   -> onHidden
            onMaximized                   -> onVisible
    Improvements:
        - Added public methods access via "ref"
    Bug fixes:
        - Fixed issue with search container covering underlining components when hidden.

Release Version 0.1.2 (01/23/2017)

    Notes:
    	- Update to latest hyperflow version.
    New Features:
    Breaking Changes:
        - Props renaming:
            statusBarHeightOffet      -> statusHeightOffet
            textInputPlaceholderColor -> placeholderTextColor
            minimized                 -> searchVisibleInitially
            onBlur                    -> onSearchBlur
            onFocus                   -> onSearchFocus
            onMinimized               -> onSearchHidden
            onMaximized               -> onSearchVisible
    Improvements:
        - Added public methods access via "ref"
    Bug fixes:

Release Version 0.1.1 (01/23/2017)

    Notes:
    	- Update to latest hyperflow version.
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:

Release Version 0.1.0 (01/22/2017)

    Notes:
        - Initial commit with features
    	    Search header component based on material design.
    	    Search suggestions and history with autocomplete. patterns
    New Features:
    Breaking Changes:
    Improvements:
    Bug fixes:

License

MIT licensed.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap