2020ReactNative本地快速搜索+Ant Design

知识点GET

1. Ant design组件安装
2. 搜索栏SearchBar
3. 宫格Grid的使用
4. Hook简介

涉及的网址

1.ant design rn 官网https://rn.mobile.ant.design/components/grid-cn/

2.Hook 简介 https://react.docschina.org/docs/hooks-intro.html

创建项目并安装ant design组件

可以参考我之前写的文章

https://blog.csdn.net/lxyoucan/article/details/108334465

所需数据

[
    {
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: 'a迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: 'a我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: 'a医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: 'a记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: 'a发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: 'a体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a健康码',
        url: 'http://www.hao123.com',
    },
    {
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: 'b迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: 'b我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: 'b医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: 'b记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: 'b发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: 'b体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b健康码',
        url: 'http://www.hao123.com',
    },{
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: '1迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: '1学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: '1管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: '1我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: '2医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: '2记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: '2发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: '2车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: '2交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: '2体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: '2安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: '2健康码',
        url: 'http://www.hao123.com',
    },
]

完整代码

/* eslint-disable prettier/prettier */
import React,{useState,useEffect} from 'react';
import {ScrollView, Text, View, Alert, SafeAreaView, StyleSheet} from 'react-native';
import {Grid, Icon, SearchBar} from '@ant-design/react-native';

const data1 = [
    {
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: 'a迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: 'a我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: 'a医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: 'a记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: 'a发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: 'a体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: 'a健康码',
        url: 'http://www.hao123.com',
    },
    {
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: 'b迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: 'b我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: 'b医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: 'b记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: 'b发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: 'b体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: 'b健康码',
        url: 'http://www.hao123.com',
    }, {
        icon: <Icon name={'credit-card'} size={'lg'} color={'#FAA816'}/>,
        text: '1迎新页面',
    },
    {
        icon: <Icon name={'wallet'} size={'lg'} color={'#2F82FD'}/>,
        text: '1学生迎新',
    },
    {
        icon: <Icon name={'bank'} size={'lg'} color={'#2F82FD'}/>,
        text: '1管理后台',
    },
    {
        icon: <Icon name={'gift'} size={'lg'} color={'#FAA816'}/>,
        text: '1我的快递',
    },
    {
        icon: <Icon name={'heart'} size={'lg'} color={'#28B378'}/>,
        text: '2医疗健康',
    },
    {
        icon: <Icon name={'pay-circle'} size={'lg'} color={'#FAA816'}/>,
        text: '2记账本',
    },
    {
        icon: <Icon name={'audit'} size={'lg'} color={'#FAA816'}/>,
        text: '2发票管家',
    },
    {
        icon: <Icon name={'car'} size={'lg'} color={'#2F82FD'}/>,
        text: '2车主服务',
    },
    {
        icon: <Icon name={'environment'} size={'lg'} color={'#2F82FD'}/>,
        text: '2交通出行',
    },
    {
        icon: <Icon name={'dribbble'} size={'lg'} color={'#F95F11'}/>,
        text: '2体育服务',
    },
    {
        icon: <Icon name={'exception'} size={'lg'} color={'#2F82FD'}/>,
        text: '2安全备忘',
    },
    {
        icon: <Icon name={'expand'} size={'lg'} color={'#2F82FD'}/>,
        text: '2健康码',
        url: 'http://www.hao123.com',
    },
];

const AntSearchDemo = () => {
    const [keyword,setKeyword] = useState('健康');
    const [data,setData] = useState(data1);

    useEffect(() => {
        console.log('keyword:'+keyword);
        let newData = [];
        data1.map((item) => {
                if (item.text.indexOf(keyword) >= 0) {
                    newData.push(item);
                }
            },
        );
        setData(newData);
    },[keyword]);

    const onChange = value => {
        setKeyword(value);
    };

    const clear = () => {
        setKeyword('');
    };
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <SearchBar
                    value={keyword}
                    placeholder="搜索"
                    onChange={onChange}
                    onClear={clear}
                    onSubmit={value => Alert.alert(value)}
                    showCancelButton
                />
                <Text>关键字：{keyword}</Text>
                <Grid
                    data={data}
                    columnNum={4}
                    onPress={(_el, index) => alert(index)}
                />
            </ScrollView>
        </SafeAreaView>
    );
};

export default AntSearchDemo;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

视频教程

https://www.bilibili.com/video/bv1Zt4y1i7rx