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

news2024/12/25 0:02:12

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" />
        <Icon
          raised
          name="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>
        <ListItem
          linearGradientProps={{
            colors: ['#FF9800', '#F44336'],
            start: {x: 1, y: 0},
            end: {x: 0.2, y: 0},
          }}
          ViewComponent={LinearGradient} // Only if no expo
        >
          <Avatar
            rounded
            source={{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>
        <Calendar
          onDayPress={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.coloradmin.cn/o/1974857.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

centos安装es、kibana、ik

这里es使用的是7.10.2版本的es&#xff0c;物料包下载地址如下 #注意安装的插件需和es版本保持一致 #es https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.10.2-linux-x86_64.tar.gz #kibana https://artifacts.elastic.co/downloads/kibana/kibana-7.10…

phpMyAdmin之CMS靶场

方法一&#xff1a;通过日志文件拿webshell 常用的语句如下&#xff1a; show global variables like %general%; set global general_logon; set global general_log_file D:/phpStudy_pro/WWW/muma.php; show global variables like %general%; select <?php eval($_…

广西南宁高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

南宁高校大学智能制造实验室&#xff0c;作为该地区乃至全国智能制造领域的重要研究和教学基地&#xff0c;一直致力于探索和创新智能制造技术。近日&#xff0c;该实验室的数字孪生可视化系统平台建设项目成功通过了验收&#xff0c;标志着其在数字孪生技术领域取得了重大突破…

c语言排序(2)

前言 在上一篇文章&#xff0c;我们学习了插入排序&#xff0c;选择排序以及交换排序中的冒泡排序&#xff0c;接下来我们继续学习交换排序、归并排序以及非比较排序。 1. 快速排序 快速排序是交换排序的一种&#xff0c;它的基本思想&#xff1a;任取待排序序列中的某元素作…

z3基础学习

z3基础学习 ​ z3是一个微软出品的开源约束求解器&#xff0c;能够解决很多种情况下的给定部分约束条件寻求一组满足条件的解的问题。 安装&#xff1a;pip install z3-solver 1. 简单使用 from z3 import * x Int(x) #创建名为x的int类型变量 y Int(y) solve(x y10,2*x…

【Verilog-CBB】开发与验证(1)——开个头

在Verilog代码设计的过程中&#xff0c;经常会涉及到一些常用组件的应用&#xff0c;比如仲裁器、打拍器、RS双向打拍器等。这些组件如果重复开发就会降低效率。这些常用的组件业内称为CBB&#xff08;Common Building Block&#xff09;。本专栏旨在开发一些好用易用的CBB&…

前端拥抱AI:LangChain.js 入门遇山开路之PromptTemplate

PromptTemplate是什么 PromptTemplate是一个可重复使用的模板&#xff0c;用于生成引导模型生成特定输出的文本。与Prompt的区别: PromptTemplate相对于普通Prompt的优势&#xff0c;即其灵活性和可定制性。 简单了解PromptTemplate后&#xff0c;咱们就来聊聊LangChain里的P…

Linux配置FTP服务

一、FTP服务基本信息 FTP服务器&#xff1a;一种应用广泛且古老的互联网文件传输协议&#xff0c;主要用于文件的双向传输。 默认端口号&#xff1a;21 全称&#xff1a;vsftpd 二、搭建FTP服务 1.关闭防火墙和selinux&#xff08;若linux系统没有这两种功能&#xff0c;跳…

最大化性能:VPS 主机优化技巧

如何让您的VPS更高效。VPS(虚拟专用服务器)是扩展网站具备成本效益的托管选项之一&#xff0c;虽然整体性能不错&#xff0c;但大多数用户并不知道&#xff0c;一些基本的优化&#xff0c;例如更改默认设置和降低负载&#xff0c;可能会大大提高其网站的速度。本文将为您介绍一…

阿里云ossbrowser安装及使用

ossbrowser是阿里云官方提供的OSS图形化管理工具&#xff0c;提供类似Windows资源管理器的功能。 阿里云对象存储OSS&#xff08;Object Storage Service&#xff09;是一款海量、安全、低成本、高可靠的云存储服务&#xff0c;可提供99.9999999999%&#xff08;12个9&#xf…

运放开环增益,闭环增益,增益带宽积与频率的关系。压摆率对输出信号影响,TINA仿真验证

开环增益 运放开环增益AOL&#xff0c;运放负反馈形成固定放大倍数的闭环增益&#xff0c;形成的条件是建立在AOL无穷大”的基础之上&#xff0c;实际运放的AOL并不是无穷大&#xff0c;是和频率有关系的。 当AOL不是无穷大时候&#xff0c;虚短是不成立的。并且当AOL比较小的时…

算法日记day 27(回溯之N皇后|解数独)

一、N皇后 题目&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n…

【C++】map|set|原理使用|multiset|multimap|operator[]|

目录 一&#xff0c;关联式容器 二&#xff0c;键值对 2.1为什么使用键值对 2.2make_pair() 三&#xff0c;STl关联容器 四&#xff0c;set 4.1模板参数 4.2默认构造 4.3使用 去重功能和自动排序 4.4增删查 insert find erase 五&#xff0c;multiset count e…

面试官:使用 xxl-job 怎样解决任务重叠问题?

大家好&#xff0c;我是君哥。今天分享批量任务的重叠问题。 面试官&#xff1a;聊聊你用过的任务调度框架&#xff1f; 我&#xff1a;目前任务调度框架的选择有很多&#xff0c;比如业内熟悉的 QuartZ&#xff0c;Spring Batch&#xff0c;xxl-job&#xff0c;以及新一代的…

从零到一:同城代驾系统源码开发全流程详解

本篇文章&#xff0c;小编将详细解析同城代驾系统源码开发的全流程&#xff0c;从需求分析到最终上线&#xff0c;帮助你从零到一构建完整的系统。 一、需求分析与市场调研 对于同城代驾系统&#xff0c;首先要明确的是目标用户群体&#xff0c;如城市白领、商务人士或家庭用…

文件操作与IO(上)

✨个人主页&#xff1a; 不漫游-CSDN博客 目录 一、认识文件 文件存储 文件路径 绝对路径 相对路径 文件种类 二进制文件 文本文件 文件系统操作 经典面试题 一、认识文件 想必文件大家都不陌生&#xff0c;文件是存储在计算机系统中的数据集合&#xff0c;它可以包…

JavaScript基础——JavaScript运算符

赋值运算符 算术运算符 一元运算符 三元/三目运算符 比较运算符 逻辑运算符 运算符优先级 在JavaScript中&#xff0c;常见的运算符可以包括赋值运算符、一元运算符、算术运算符&#xff08;二元运算符&#xff09;、三元/三目运算符、比较运算符、逻辑运算符等&#xff0…

centos7安装zabbix

可以联网的centos7系统 关闭防火墙 selinux也关了 1、配置镜像源 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo wget -O /etc/yum.repos.d/epel.repo https://mirrors.aliyun.com/repo/epel-7.repo2、安装nginx并配置 yum ins…

uniapp全局分享功能实现方法(依赖小程序右上角的分享按钮)

1、uniapp开发小程序时默认是关闭分享功能的。点击右上角三个点可查看&#xff0c;效果图如下&#xff1a; 2、在utils文件夹下新建share.js文件&#xff0c;名字任起。&#xff08;使用的是全局分享&#xff0c;因为一个一个页面的去分享太麻烦且没必要。&#xff09; export…

万字长文分享快手 Kolors 可图大模型应用实践

导读 在企业提效方面&#xff0c;多模态能力同样具有重要意义。在 AICon 北京站活动中&#xff0c;快手「可图」大模型负责人李岩分享了主题为《快手「可图」文生图大模型应用实践》的演讲&#xff0c;以下为李岩演讲内容&#xff5e;期待对你有所启发&#xff01; 一、基座模…