NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！

站长

2023年09月21日 23:02 · 阅读数 13

NutUI React Native Github 地址：github.com/jdf2e/nutui…
NutUI React Native 官方文档地址：nutui.jd.com/react-nativ…

前言

NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！在家政、到店、旅行、电影票等业务需求开发中，受限包大小控制，原生、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 React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！基于 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 布局，这个模型的特点在于能够在按照固定尺寸布局之后，灵活地分配屏幕上的剩余空间，利用这个模型可以轻松实现许多应用中所需要的布局设计。

NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！在 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',
    }
}

对外开源适配 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 仓库地址：点这里

贡献指南

开发流程

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扫码）

NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！

自营高端家政品牌"京东家政"，提供预约日常保洁、空调清洗、玻璃清洗等服务，为用户提供了良好的全方位清洁服务体验。

京东到店

（京东App扫码）

NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！

到店类业务作为主要发力点，利用京东线上购物便捷与线下门店可见实物与体验的双重优势，解决单一线上或单一线下经营模式的不足，同时实现供应链的进一步优化，将线上购物和线下体验从人货场等多维度进行全域的融合打通，为顾客带来便捷、全新的购物体验。

微信群

NutUI React Native 组件库正式发布🎉，适配 JDReact，欢迎试用！

最后

NutUI 基于成熟的设计体系，拥有强大的可组合性和灵活的可扩展能力，期待您的使用与反馈，如您喜欢，来点个 Star ❤️ 支持我们一下吧 ~

转载自:https://juejin.cn/post/7266802662048759868