react-native从入门到实战系列教程-React Native Elements
创始人
2024-11-11 03:37:09

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 (     styles.container}>                Home Screen                           () => console.log('hello')}         />                            {             colors: ['#FF9800', '#F44336'],             start: {x: 1, y: 0},             end: {x: 0.2, y: 0},           }}           ViewComponent={LinearGradient} // Only if no expo         >           {uri: 'https://randomuser.me/api/portraits/men/33.jpg'}}           />                        {color: 'white', fontWeight: 'bold'}}>               Chris Jackson                          {color: 'white'}}>               Vice Chairman                                                     day => {             console.log('selected day', day);           }}         />               ); } 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
在这里插入图片描述

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...