react-native从入门到实战系列教程-React Native Elements

react-native的ui框架内网真的是屈指可数,能用的成熟的几乎找不到。不像web端的繁荣景象,可以用荒凉来形容不为过。

京东的nutui说也支持react-native,官网及其简陋。尝试了未成功运行,可能是项目类型不同,对比其他类型的ui库都分了不同类型的安装环境,这方面差点意思。
在这里插入图片描述
已经弃用了,有兴趣的话可以去摸索下

React Native Elements 库

React Native Elements 是一款 React Native 的UI框架,风格配色均属上乘,框架封装了很多常用组件,用来搭建产品原型非常方便。官网链接,点击可以进入官网

在这里插入图片描述
我的项目是用react-native运行的,按照指引,的确跑起来了,效果还不错
在这里插入图片描述
有兴趣的可以去尝试下。

import {View, Text, StyleSheet, SafeAreaView} from 'react-native';
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
import {Button,Badge,Card,Icon,Stack,Tooltip,Input,ListItem,Avatar,
} from '@rneui/themed';
import {useState} from 'react';
import LinearGradient from 'react-native-linear-gradient'; // Only if no expo
function HomeScreen() {const [open, setOpen] = useState(false);return (<SafeAreaView style={styles.container}><View><Text>Home Screen</Text><Icon name="rowing" /><Icon name="g-translate" color="#00aced" /><Iconraisedname="heartbeat"type="font-awesome"color="#f50"onPress={() => console.log('hello')}/><Button title="Outline" type="outline" /><Badge value="3" status="success" /><Card><Text>Word of the Day</Text><Text h4>be-nev-o=lent</Text><Text>adjective</Text><Text>well meaning and kindly.{'a benevolent smile'}</Text><Button size="sm" type="clear">Learn More</Button></Card><ListItemlinearGradientProps={{colors: ['#FF9800', '#F44336'],start: {x: 1, y: 0},end: {x: 0.2, y: 0},}}ViewComponent={LinearGradient} // Only if no expo><Avatarroundedsource={{uri: 'https://randomuser.me/api/portraits/men/33.jpg'}}/><ListItem.Content><ListItem.Title style={{color: 'white', fontWeight: 'bold'}}>Chris Jackson</ListItem.Title><ListItem.Subtitle style={{color: 'white'}}>Vice Chairman</ListItem.Subtitle></ListItem.Content><ListItem.Chevron color="white" /></ListItem><CalendaronDayPress={day => {console.log('selected day', day);}}/></View></SafeAreaView>);
}
const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},
});
export default HomeScreen;

安装步骤

npm install @rneui/themed @rneui/base

配置要根据自己的项目情况,按文档操作。装完后,项目必须重启试用看效果,否则,会报错给人的错觉是不适配。

其他参考

这几个仓库也是不过的,就是每个组件都是分散的,不同的人开发出来的,风格不统一,只能作为特定需求的组件来使用
https://github.com/oblador/react-native-vector-icons
https://github.com/jondot/awesome-react-native?tab=readme-ov-file#components
https://github.com/wix/react-native-calendars
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/390816.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink中上游DataStream到下游DataStream的内置分区策略及自定义分区策略

目录 全局分区器GlobalPartitioner 广播分区器BroadcastPartitioner 哈希分区器BinaryHashPartitioner 轮询分区器RebalancePartitioner 重缩放分区器RescalePartitioner 随机分区器ShufflePartitioner 转发分区器ForwardPartitioner 键组分区器KeyGroupStreamPartitio…

【java基础】徒手写Hello, World!程序

文章目录 前提&#xff1a;java环境变量配置使用vscode编写helloworld解析 前提&#xff1a;java环境变量配置 https://blog.csdn.net/xzzteach/article/details/140869188 使用vscode编写helloworld code .为什么用code看下图 报错了&#xff01;&#xff01;&#xff01;&…

样式与特效(3)——实现一个测算页面

这次我们使用前端实现一个简单的游戏页面,理论上可以增加很多玩法&#xff0c;&#xff0c;但是这里为了加深前端的样式和JS点击事件&#xff0c;用该案例做练习。 首先需要掌握手机端的自适应&#xff0c;我们是只做手机端玩家页面 。需要允许自适应手机端页面&#xff0c; 用…

24年电赛——自动行驶小车(H题)MSPM0G3507-编码电机驱动与通用PID

一、编码电机驱动 编码电机的详情可以查看此篇文章&#xff1a; stm32平衡小车--&#xff08;1&#xff09;JGB-520减速电机tb6612&#xff08;附测试代码&#xff09;_jgb520-CSDN博客 简单来说&#xff0c;编码电机的驱动主要是给一个 PWM 和一个正负级就能驱动。PWM 的大小…

9-springCloud集成nacos config

本文介绍spring cloud集成nacos config的过程。 0、环境 jdk 1.8maven 3.8.1Idea 2021.1nacos 2.0.3 1、项目结构 根项目nacos-config-sample下有两个module&#xff0c;这两个module分别是两个springboot项目&#xff0c;都从nacos中获取连接mysql的连接参数。我们开工。 …

羌活基因组--文献精读-36

The chromosome-scale assembly of the Notopterygium incisum genome provides insight into the structural diversity of coumarins 羌活&#xff08;Notopterygium incisum&#xff09;基因组的染色体级别组装为香豆素的结构多样性提供了新的见解 摘要 香豆素是由苯丙素途…

学生信息管理系统(Python+PySimpleGUI+MySQL)

吐槽一下 经过一段时间学习pymysql的经历&#xff0c;我深刻的体会到了pymysql的不靠谱之处&#xff1b; 就是在使用int型传参&#xff0c;我写的sql语句中格式化%d了之后&#xff0c;我在要传入的数据传递的每一步的去强制转换了&#xff0c;但是他还是会报错&#xff0c;说我…

决策树可解释性分析

决策树可解释性分析 决策树是一种广泛使用的机器学习算法&#xff0c;以其直观的结构和可解释性而闻名。在许多应用场景中&#xff0c;尤其是金融、医疗等领域&#xff0c;模型的可解释性至关重要。本文将从决策路径、节点信息、特征重要性等多个方面分析决策树的可解释性&…

k8s集群的资源发布方式(滚动/蓝绿/灰度发布)及声明式管理方法

目录 1.常见的发布方式 2.滚动发布 3.蓝绿发布 4.实现金丝雀发布&#xff08;Canary Release&#xff09; 5.声明式管理方法 1.常见的发布方式 蓝绿发布:两套环境交替升级&#xff0c;旧版本保留一定时间便于回滚优点&#xff1a;用户无感知&#xff0c;部署和回滚速度较…

如何通过前端表格控件实现自动化报表?

背景 最近伙伴客户的项目经理遇见一个问题&#xff0c;他们在给甲方做自动化报表工具&#xff0c;项目已经基本做好了&#xff0c;但拿给最终甲方&#xff0c;业务人员不太买账&#xff0c;项目经理为此也是天天抓狂&#xff0c;没有想到合适的应对方案。 现阶段主要面临的问…

chrome/edge浏览器插件开发入门与加载使用

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、插件与普通前端项目二、开发插件——manifest.json三、插件使用edge浏览器中使用/加载插件chrome浏览器中使用/加载插件 总结 前言 chrome插件的出现&#xff0c;初衷可能是为了方便用户更好地控制浏览器&#xff0c…

C++ | 类和对象(下)(static成员、友元、内部类、匿名对象)

目录 ​编辑 static成员 static性质简介 static属于整个类&#xff0c;属于所有对象 static成员的声明与定义 static函数 友元friend 友元特性简介 友元关系讲解 内部类 特性一 特性二 匿名对象 结语 static成员 static性质简介 static成员在类里面是非常独特的…

Golang之OpenGL(一)

使用OpenGL实现窗口中绘制三角形&#xff08;纯色|彩色&#xff09;、正方形&#xff08;变色&#xff09; 一、简单实现窗口绘制三角形二、绘制的多颜色三角形&#xff08;基于 ‘ 简单实现窗口绘制三角形 ’ &#xff09;1、在顶点着色器和片段着色器中添加了颜色的输入和输出…

反制攻击者-蚁剑低版本

目录 安装 攻击者获取防守方的权限 防守方反制攻击者 防守方获取攻击者的shell权限 安装 安装蚁剑2.0.7版本 链接&#xff1a;https://pan.baidu.com/s/1t40UxkZ2XuSWG6VCdGzvDw?pwd8888 提取码&#xff1a;8888 下载好后先打开Loader文件夹下的.exe文件&#xff0c;打…

赛蓝企业管理系统 AuthToken/Index 身份认证绕过漏洞复现

0x01 产品简介 赛蓝企业管理系统是一款为企业提供全面管理解决方案的软件系统&#xff0c;它能够帮助企业实现精细化管理&#xff0c;提高效率&#xff0c;降低成本。系统集成了多种管理功能&#xff0c;包括但不限于项目管理、财务管理、采购管理、销售管理以及报表分析等&am…

【iOS】——GCD总结

同步和异步的区别 同步执行等待操作完成&#xff0c;而异步执行允许程序在操作完成前继续运行&#xff0c;提高了效率和响应性。这里的关键就是上一个操作需不需要等待当前操作的执行&#xff0c;如果需要就是同步&#xff0c;如果不需要就是异步。 异步有开启新线程的能力但…

合作伙伴中心Partner Center中添加了Copilot预览版

目录 一、引言 二、Copilot 功能概述 2.1 Copilot 简介 2.2 Copilot 的核心功能 2.3 Copilot 的访问和使用 三、Copilot 的使用方法 3.1 Copilot 功能区域 3.2 Copilot 使用示例 3.2.1 编写有效提示 3.2.2 使用反馈循环 四、负责任的人工智能 4.1 Copilot 结果的可…

Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签

本教程主要实现【Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签】。 本文源码&#xff1a;https://gitee.com/songfayuan/go-zero-demo 教程源码分支&#xff1a;master 分支&#xff08;_examples/word-template/fill-word-template.go&…

win 10 局域网共享

1&#xff0c;打开共享 控制面板\网络和 Internet\网络和共享中心\高级共享设置 &#xff08;在控制面板界面建议使用大图片或小图标容易找到目标&#xff09; 或者直接复制红色部分&#xff0c;然后打开此电脑&#xff0c;粘贴到地址栏直接回车即可直接到达几面 打开如下2个…

达梦数据库一体机在宜昌市财政局上线了!

财政作为国家治理的基础和重要支柱&#xff0c;其数字化转型已成为构建现代财政制度的必由之路&#xff0c;引领着财政管理体系向更高效、更智能的方向迈进。 达梦数据全面助力财政信息化转型与智能化发展&#xff0c;采用 DAMEGN PAI I 系列数据库一体机&#xff0c;为宜昌市财…