- NutUI React Native Github 地址:github.com/jdf2e/nutui…
- NutUI React Native 官方文档地址:nutui.jd.com/react-nativ…
前言
在家政、到店、旅行、电影票等业务需求开发中,受限包大小控制,原生、Flutter 选型除了特别重要的黄金流程,基本很难再集成其他业务包。H5 配合客户端做离线预加载、客户端渲染、服务端渲染可以加快首屏秒开,但在涉及键盘输入、路由跳转等交互体验方面还是难以做到完美;魔方 Mcube 目前只限于黄流页面的动态化开发;JDReact 作为内外都较成熟的动态化框架,既能满足类原生的体验,又能满足业务定制化需求的快速交付,H5 版本还可对外投放到微信、抖音生态,在开发效率方面是一个不错的选型方案。
目前除了 JDReact 内置调用原生控件组件外,大部分页面基础 UI 都需要在各个业务包实现一遍,费时费力,沉淀也仅限于独立业务部门。NutUI 是一款京东风格的移动端组件库。在我们接入之前,已支持 Vue 和 React 技术栈,并对 Taro 进行了多端适配。目前 NutUI 在对接零售大前端域的组件标准部分,同时 NutUI 有较好的开源文化。借助 NutUI 现有的设计规范及标准,React Native 版本的实现,既可补充 NutUI 的基础技术栈,完善 NutUI 组件生态,又能进一步提升业务需求开发交付效率。
于是年初和 NutUI 团队沟通实现 React Native 版本,初期规划 50 个常用基础组件,内部也边开发业务需求边完善,今天终于组件、Demo、文档准备齐全,正式发布 v1.0.0 版本,欢迎试用和共建。
Demo 体验地址:
平台 | Android | iOS |
---|---|---|
请用京东 APP 扫码体验 | ![]() |
![]() |
组件
v1.0.0
目前已实现如下组件,欢迎在业务中进行试用:
类型 | 组件 | 安卓 | iOS | H5 | Demo | 文档 |
---|---|---|---|---|---|---|
基础组件 | Button | ✓ | ✓ | ✓ | ✓ | ✓ |
Cell | ✓ | ✓ | ✓ | ✓ | ✓ | |
Icon | ✓ | ✓ | ✓ | ✓ | ✓ | |
Overlay | ✓ | ✓ | ✓ | ✓ | ✓ | |
Popup | ✓ | ✓ | ✓ | ✓ | ✓ | |
布局组件 | Divider | ✓ | ✓ | ✓ | ✓ | ✓ |
Grid | ✓ | ✓ | ✓ | ✓ | ✓ | |
Layout | ✓ | ✓ | ✓ | ✓ | ✓ | |
Elevator | ✓ | ✓ | ✓ | ✓ | ✓ | |
FixedNav | ✓ | ✓ | ✓ | ✓ | ✓ | |
Indicator | ✓ | ✓ | ✓ | ✓ | ✓ | |
NavBar | ✓ | ✓ | ✓ | ✓ | ✓ | |
Pagination | ✓ | ✓ | ✓ | ✓ | ✓ | |
SideNavBar | ✓ | ✓ | ✓ | ✓ | ✓ | |
数据录入 | Calendar | ✓ | ✓ | ✓ | ✓ | ✓ |
Checkbox | ✓ | ✓ | ✓ | ✓ | ✓ | |
Input | ✓ | ✓ | ✓ | ✓ | ✓ | |
InputNumber | ✓ | ✓ | ✓ | ✓ | ✓ | |
Radio | ✓ | ✓ | ✓ | ✓ | ✓ | |
Rate | ✓ | ✓ | ✓ | ✓ | ✓ | |
SearchBar | ✓ | ✓ | ✓ | ✓ | ✓ | |
TextArea | ✓ | ✓ | ✓ | ✓ | ✓ | |
操作反馈 | ActionSheet | ✓ | ✓ | ✓ | ✓ | ✓ |
BackTop | ✓ | ✓ | ✓ | ✓ | ✓ | |
Dialog | ✓ | ✓ | ✓ | ✓ | ✓ | |
Drag | ✓ | ✓ | ✓ | ✓ | ✓ | |
Notify | ✓ | ✓ | ✓ | ✓ | ✓ | |
Swipe | ✓ | ✓ | ✓ | ✓ | ✓ | |
Switch | ✓ | ✓ | ✓ | ✓ | ✓ | |
Toast | ✓ | ✓ | ✓ | ✓ | ✓ | |
展示组件 | Avatar | ✓ | ✓ | ✓ | ✓ | ✓ |
Badge | ✓ | ✓ | ✓ | ✓ | ✓ | |
Collapse | ✓ | ✓ | ✓ | ✓ | ✓ | |
CountDown | ✓ | ✓ | ✓ | ✓ | ✓ | |
Ellipsis | ✓ | ✓ | ✓ | ✓ | ✓ | |
Empty | ✓ | ✓ | ✓ | ✓ | ✓ | |
NoticeBar | ✓ | ✓ | ✓ | ✓ | ✓ | |
Price | ✓ | ✓ | ✓ | ✓ | ✓ | |
Progress | ✓ | ✓ | ✓ | ✓ | ✓ | |
Skeleton | ✓ | ✓ | ✓ | ✓ | ✓ | |
Steps | ✓ | ✓ | ✓ | ✓ | ✓ | |
Swiper | ✓ | ✓ | ✓ | ✓ | ✓ | |
Table | ✓ | ✓ | ✓ | ✓ | ✓ | |
Tag | ✓ | ✓ | ✓ | ✓ | ✓ | |
TrendArrow | ✓ | ✓ | ✓ | ✓ | ✓ | |
VirtualList | ✓ | ✓ | ✓ | ✓ | ✓ | |
特色组件 | Card | ✓ | ✓ | ✓ | ✓ | ✓ |
快速开始
安装
npm install --save @nutui/nutui-react-native
# expo 社区版本,支持渐变色
npm install --save expo-linear-gradient
# JDReact 内部版本,支持渐变色
npm install --save react-native-linear-gradient
# 配置 resolve.alias: 'expo-linear-gradient': 'react-native-linear-gradient'
使用
import React from "react";
import { Button } from '@nutui/nutui-react-native';
const App = () => {
return (
<>
<Button type="primary">主要按钮</Button>
<Button type="info">信息按钮</Button>
<Button type="default">默认按钮</Button>
<Button type="danger">危险按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="success">成功按钮</Button>
</>
);
};
export default App;
特点
按需加载
下面两种方式都可以只加载用到的组件,选择其中一种方式即可。
- 使用 babel-plugin-import(推荐)。
// .babelrc or babel-loader option
{
"plugins": [
["import", { libraryName: "@nutui/nutui-react-native" }] // 与 Web 平台的区别是不需要设置 style
]
}
// 通过如下方式引入模块方式即可
import { Button } from '@nutui/nutui-react-native';
- 手动引入
import Button from '@nutui/nutui-react-native/lib/button';
跨平台
基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景,UI 样式高度可配置,拓展性更强,轻松适应各类产品风格。
支持 Typescript
静态类型系统能帮助你有效防止许多潜在的运行时错误,而且随着应用日渐丰满会更加显著。最新版本的 TypeScript 也知道该如何自己从 NPM 包里解析类型声明。这意味着只要你成功地通过 NPM 安装了,就不再需要任何额外的工具辅助,即可在项目中使用 TypeScript 了。
主题定制
支持灵活的样式定制,满足多种视觉业务和品牌需求,包括但不限于全局主色调和特定组件视觉定制的支持。
ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。具体样式变量可查看 theme。
import React from "react";
import { Button, Provider } from '@nutui/nutui-react-native';
import theme from '@nutui/nutui-react-native/lib/configprovider/styles/themes/default';
const App = () => {
return (
<Provider theme={theme}>
<Button type="primary">主要按钮</Button>
<Button type="info">信息按钮</Button>
<Button type="default">默认按钮</Button>
<Button type="danger">危险按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="success">成功按钮</Button>
</Provider>
);
};
export default App;
国际化
支持多语言,组件默认使用中文。
import React from "react";
import { Button, Provider } from '@nutui/nutui-react-native';
import zhCN from '@nutui/nutui-react-native/lib/configprovider/locales/zh-CN';
const App = () => {
return (
<Provider locale={zhCN}>
<Button type="primary">主要按钮</Button>
<Button type="info">信息按钮</Button>
<Button type="default">默认按钮</Button>
<Button type="danger">危险按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="success">成功按钮</Button>
</Provider>
);
};
export default App;
目前支持的语言:
语言 | 文件名 | 版本 |
---|---|---|
英语 | en-US | v1.0.0 |
简体中文 | zh-CN | v1.0.0 |
如果上方列表中没有你需要的语言,欢迎给我们提 Pull Request 来增加新的语言包。改动内容可以参考 语言包 的 PR。
NutUI 视觉规范
基于 NutUI 京东 APP 统一视觉和组件规范,保证统一不同页面层级的信息架构、视觉表达和交互体验。用户在产品终端内,各链路、各阵地的体验是一致的,看到的信息元素,也会有共性的传达。 通过建立统一标准公共基础组件库,可以极大地提高开发效率,具备如下优点:
- 减少冗余,优化性能,提升开发效率;
- 提高设计还原度;
- 降低设计和研发的对接成本;
- 统一产品体验,映射品牌心智。
适用场景
- 适合于中大型产品应用。
- 适合于基于 react-native、JDReact 的多终端应用。
- 适合不同 UI 风格的高度定制需求的应用。
后续迭代
迭代计划
每次 Bug 或 PR 更新一个 patch 版本,每双周一个 minor 版本,大版本跟随 NutUI 节奏升级。预计 9 月底对齐 NutUI 组件数量,API 和组件规范与 NutUI 对齐。
待实现
组件
目前待实现组件包含:布局组件(Sticky)、导航组件(Menu、Tabs)、数据录入(Cascader、DatePicker、Form、NumberKeyboard、Picker、Range、Uploader)、操作反馈(Infiniteloading、PullToRefresh)、展示组件(Animate、AnimatingNumbers、CircleProgress、ImagePreview、Video、WaterMark)、特色组件(Address、Barrage)。
单元测试
目前为了快速完成组件,支持业务开发,暂时还未做相关单元测试集成,随着后续迭代,也会逐步把单元测试覆盖率进行提升。
NutUI 4.0 规范对齐
本期开发主要基于 NutUI 3.0 规范进行开发,4.0 规范正在逐步升级迭代中,React Native 版本也会随着 4.0 规范稳定后,进行整体升级。
开发
环境安装
Expo Go APP
如果基于 Expo 框架进行开发,可通过 expo.dev/client 下载 Expo APP 扫码进行预览。
yarn expo start
React Native Cli
环境安装参照文档:reactnative.dev/docs/enviro…
npx react-native start
npx react-native run-ios
npx react-native run-android
React vs React Native 差异点
布局
React Native 只支持 Flex 布局,这个模型的特点在于能够在按照固定尺寸布局之后,灵活地分配屏幕上的剩余空间,利用这个模型可以轻松实现许多应用中所需要的布局设计。
在 React Native 中 position 仅支持两种属性,即relative
(默认)和absolute
。
样式
React Native 的样式基于开源的跨平台布局引擎 Yoga,样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致。样式名基本上是遵循了 web 上的 CSS 的命名,只是按照 JS 的语法要求使用了驼峰命名法,例如将background-color
改为backgroundColor
。详细了解 React Native 的样式:React Native Layout Props。
选择器
- 基本选择器只支持类选择器
- 不支持组合选择器的写法
- 不支持伪类及伪元素
单位
React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。如果你想要按比例填充屏幕上某一部分,又不想使用flex
布局,那么可以在组件的style
中使用百分比。与弹性宽高相似,百分比宽高要求父容器有一个明确的尺寸。
资源加载
图片
- 加载本地磁盘上的图片
- 网络请求的图片
- base64 格式的图片
import {
Image,
} from 'react-native';
const Home = () => {
return (
<View>
<Image
source={require('./logo.jpg')}
style={{width: 360, height: 280}}></Image>
<Image
source={{ uri: 'https://img14.360buyimg.com/imagetools/jfs/t1/124864/1/33144/4732/63a97786F51517a97/a9ca3c1e043ceeb4.png' }}
style={{width: 197 height: 46}}></Image>
<Image
source={{
uri: 'data:image/png;base64,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'
}}
style={{width: 120, height: 46}}></Image>
</View>
)
}
字体
在 JDReact 项目中默认支持京东正黑体字体,同时还支持平方等系统默认字体。
{
fontFamily: 'JDZhengHT',
}
在 Expo 项目中可通过如下方式定制字体。
npx expo install expo-font
// Rest of the import statements
import { useFonts } from 'expo-font';
export default function App() {
const [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
return (
<Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
);
}
跨平台支持
import {Platform, StyleSheet} from 'react-native';
# 'ios' | 'android' | 'native' | 'default'
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});
开放
对内适配 JDReact(React Native 0.59 版本)
JDReact平台是在 Facebook React Native 开源框架基础上,进行了深度二次开发和功能扩展。不仅打通了Android/iOS/Web三端平台,而且对京东移动端基础业务能力进行了SDK级别的封装,提供了统一、易于开发的API。
基于 JDReact 内置组件和 API,对目前 50+ 组件进行了适配和丰富,支持安装依赖直接使用。需要注意的是 JDReact 渐变色支持依赖 react-native-linear-gradient,因此在 JDReact 项目中使用时,需要修改 resolve.alias。
resolve: {
alias: {
'expo-linear-gradient': 'react-native-linear-gradient',
}
}
Demo 仓库地址:xingyun.jd.com/codingRoot/…
对外开源适配 Expo(React Native 0.70+ 版本)
Expo 应用程序是带有 Expo SDK 的本地应用程序。SDK 是一个 native-and-JS 库,它提供了对设备的系统功能的访问(像照相机、联系人、本地存储和其他硬件)。这意味着您不需要使用 Xcode 或 Android Studio,也不需要编写任何本地代码,而且它也使您的纯 JS 项目非常便于移植,因为它可以在包含世博会 SDK 的任何本地环境中运行。
Expo 还提供了 UI 组件来处理各种各样的用例,这些用例几乎所有的应用都能覆盖,但没有被融入到 React Native 中,比如图标、模糊视图等等。
最后,Expo SDK 提供了对服务的访问,这些服务通常是一种很难管理的服务,但几乎每个应用都需要它。Expo 可以为你管理你的资产,它可以帮你处理推送通知,它还可以构建原生二进制文件,这些二进制文件已经准备好部署到应用商店中。
Demo 仓库地址:github.com/jdf2e/nutui…
贡献指南
开发流程
- fork 并下载仓库代码。
- 安装依赖。
yarn
- 启动 Demo。
# H5
yarn demo start
# android
yarn demo android
# iOS
yarn demo iOS
- 进行组件和文档修改。
# 启动文档预览
yarn doc
- 进行类型和 lint 校验。
yarn typecheck
yarn lint
- 遵循通用 commit 规范进行提交。
- 提交后发起 PR,需代码评审后进行合并。
- 代码合并后会触发 action 自动进行打包构建、版本发布。
本地打包构建
react-native-builder-bob 脚手架集成了 expo、eslint、ESLint、prettier、Typescript 等优秀的 JS 生态来帮助开发者简单的进行 RN 模块的开发。具体配置信息参考 package.json 文件。
"react-native-builder-bob": {
"source": "components",
"output": "lib",
"targets": [
"commonjs",
"module",
"typescript"
]
},
支持构建 commonjs、module、typescript、aar。
# 打包
yarn prepack
# link
yarn link
# 在具体工程中进行 link
cd targetProject
yarn link @nutui/nutui-react-native
支持反馈
案例展示
京东家政
(京东App扫码)
自营高端家政品牌”京东家政”,提供预约日常保洁、空调清洗、玻璃清洗等服务,为用户提供了良好的全方位清洁服务体验。
京东到店
(京东App扫码)
到店类业务作为主要发力点,利用京东线上购物便捷与线下门店可见实物与体验的双重优势,解决单一线上或单一线下经营模式的不足,同时实现供应链的进一步优化,将线上购物和线下体验从人货场等多维度进行全域的融合打通,为顾客带来便捷、全新的购物体验。
微信群
最后
特别感谢本次为 NutUI React Native 做出贡献的同事:@刘斌、@曹博、@唐乾柱、@孟拴刚、@王备、@佟恩等。NutUI 基于成熟的设计体系,拥有强大的可组合性和灵活的可扩展能力,期待您的使用与反馈,如您喜欢,来点个 Star ❤️ 支持我们一下吧 ~