2020ReactNative本地快速搜索+Ant Design

最新推荐文章于 2024-04-29 00:45:02 发布
最新推荐文章于 2024-04-29 00:45:02 发布
阅读量497 收藏 7
点赞数
分类专栏： React Native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxyoucan/article/details/108440075
版权

知识点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

 

ITKEY_
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React+TS+RTK+Ant Design+ESLint+Git Lint + Stylelint 项目构建企业级模板
08-01
React+TS+Redux Tool Kit+Ant Design+ESLint+Git Lint + Stylelint 项目构建企业级模板，具体参考https://gitee.com/zhang_huai_wei/zhw-blog-pc || React+TS+Redux Tool Kit+Ant Design+ESLint+Git Lint + ...
2020年React Native使用Ant Design Mobile RN组件
lxyoucan的博客
09-01 7670
Ant Design Mobile RN是一个很优秀的React Native 界面库，可以帮助我们简单方便的开发出漂亮的界面。我在基于0.63版本使用的过程中遇到一些小波折，比如字体无法正常，各种红屏，缺少各种组件之类的。这里分享一下使用过程。 Ant Design Mobile RN of React官方文档 新建RN项目 npx react-native init AntDesignDemo 换国内清华大学的提高速度（非必须） ios/Podfile文件头部增加下面 sour...
react native 0.70版本使用ant-design-mobile-rn及icons字体图标库
好巧的博客
09-14 3613
示例为全局使用的方式，官方文档的示例是按需引入的，因此全局使用的需要自己去 node_modules/@ant-design/react-native/lib/ 找对应的组件名称。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。android文件夹: android\app\src\main\assets。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
ReactNative进阶（四十二）：面试必备：2024 ReactNative 经典面试题总结（含答案
2301_82242528的博客
04-29 902
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。由于使用了引用赋值，新对象简单引用原始对象后，新旧对象值的修改都将影响到彼此。(结构共享)，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。它是一个简单、异步、持久化的键值对存储系统，它对于App来说是全局的。在原生端的实现是把较小值存放在序列化的字典中，而把较大值写入单独的文件。是一旦被创建，就不能被更改的数据。
Ant Design for React Native精简笔记
lxyoucan的博客
12-09 2358
背景 Ant Design是一套不错的UI组件库，功能强大。但是依赖了很多其他的组件，在RN6.3以后要自己安装以下组件才能正常使用。 yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager @react
react-native使用 @ant-design/react-native
当然是最帅气的茶茶丸了！哇耶~
03-21 870
完成后查看 /项目名称/android/app/src/main/assets/fonts。
[RN] React Native 使用 阿里 ant-design
weixin_30888707的博客
06-23 475
React Native 使用 阿里 ant-design 实例效果如图： 一、安装 npm install antd-mobile-rn --save npm install babel-plugin-import --save-dev 二、配置 编辑根目录下 .babelrc 增加 红色区域显示代码 { "p...
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 ...
教务管理+在线考试系统React + React+ Redux + Ant Design +Webpack.zip
04-06
在线考试系统是一种基于互联网的教育技术工具，用于...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
react-typescript-react-router-redux-antDesign-demo：React + typescript + react-router + redux + antDesign项目构建
02-20
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject或yarn eject 注意：这是单向操作。 ...
云生活超市——React Native电商app，React + ant-design+SpringBoot
最新发布
05-24
该项目利用了基于springboot + vue + mysql的开发...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
ant-design-mobile-rn：用于React Native的Ant设计
02-01
English | 蚂蚁设计移动RN 可配置的Mobile UI规范和基于React的实现。 产品特点 遵循Ant Design Mobile UI规范。 不同产品的可配置UI样式。 支持基于React Native的Web和本机用法。 用TypeScript开发。 演示版 # clone git clone git@github.com:ant-design/ant-design-mobile-rn.git # go to ant rn folder cd ant-design-mobile-rn # install dependencies yarn # start ios simulator or android # cd rn-kitchen-sink/ios && pod install yarn ios # or yarn android 安装与使用 $ npm install @ant-design/react-native --save 要么 yarn add @ant-design/react-native 安装对等依赖项（4.0.0+） npm inst
react-native-searchbar：一个非常漂亮的React Native搜索栏
02-05
React本机搜索栏 React Native的一个很棒的搜索栏。 它具有内置的简单搜索功能，可以通过处理组件data并提供handleResults函数来使用该函数，该函数将接收过滤后的data数组副本。 搜索功能使用深度优先算法遍历数据，并仅在数据中所有字符串，数字和布尔值内查找用户输入的indexOf 。 在iOS和Android上均可使用。 （以这些文档和存储库中的示例呈现） 安装 npm install react-native-searchbar --save 如果项目尚未安装 ，请安装它们。 搜索栏访问MaterialIcons。 现在，您可以import Search
Rn引入@ant-design/react-native组件库
明知山
07-02 1295
文档地址 下载ant-design组件库 npm install @ant-design/react-native --save 下载按需引入插件 npm install babel-plugin-import -D 在.babelrc 或babel-loader文件配置 { "plugins": [ ["import", { libraryName: "@ant-design/react-native" }] ] } 链接到图标和字体 npx react-native link 随
【react-native】React Native + Ant Design 的 Tabs组件
书呆子ITme
11-10 2207
现象：最近开发RN项目，在使用ant-design的tabs标签的时候，发现标签是可以左右滑动切换，但是无法点击标签切换。 原因：不知 解决方案： renderTabBar时设置TabBar渲染组件 goToTab切换标签 index.tsx /** “tab” 页面 */ import React, { Component } from 'react' import { View, Text...
React快速入门 - Ant Design入门(3)
weixin_45428910的博客
06-12 2225
React快速入门 - Ant Design入门(3)
react-native 电商搜索界面
Aichiwawacai的博客
01-04 646
react-native 电商搜索界面 此界面实现了搜索，自动补全搜索内容，热门搜索，搜索历史记录，清除搜索历史记录等功能，欢迎大家使用 import React from 'react'; import { AppRegistry, Text, View, Button, StyleSheet, ScrollView, Image, ...
React Native 实现列表模糊搜索（FlatList模糊搜索）
孙先森的博客
11-04 2401
记录一下本地实现列表模糊搜索，效果图： 实现思路： 利用TextInput的onChangeText方法，当输入框文字改变时立即去调用自己写的数据筛选方法，修改Flatlist的data（data应该是定义在state中）。列表数据最好用map循环给每一条数据增加一个新的字段（此处用hidden解释）控制item是否显示。搜索方法中判断输入框传过来的关键字，长度大于0时，用map循环data，不...
react-native仿京东首页搜索栏联动效果
qq_37399372的博客
01-03 2589
react-native仿京东首页搜索栏联动效果
React + React Router + Redux + Axios + Ant Design
07-28
React + React Router + Redux + Axios + Ant Design 是一套常用的前端开发技术栈，用于构建现代化的 Web 应用程序。下面我会逐个介绍这些技术的作用和特点： - React 是一个用于构建用户界面的 JavaScript 库，它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值