必须UI -RN 是驱动所有经验的库 需要产品 React 本地应用程序构建于 大边形。 。 。 .
文档
故事书是文献: https://neetoui-rn.onrender.com/ 互联网档案馆的存檔,存档日期2013-12-21
每个组件都有其源头旁边的故事 Docs 章节涵盖
开始和主题符号.
安装
yarn add @bigbinary/neetoui-rn @gorhom/bottom-sheet @shopify/flash-list react-native-edge-to-edge react-native-gesture-handler react-native-nitro-modules react-native-reanimated react-native-safe-area-context react-native-svg react-native-toast-message react-native-unistyles
导航到 iOS 文件夹并运行 :
pod install
所有本地组件将自动链接 .
欢乐
包件船没有翻译类型Script,所以消耗的应用程序必须让Jest 改变它,而不是跳过它作为一个依赖:
// jest.config.js
transformIgnorePatterns: [
"node_modules/(?!(@react-native|@bigbinary|@gorhom|@shopify|react-native|react-native-[^/]+)/)",
],
没有这个,第一个测试失败 import 带有语法错误.
开始
他们
主题通过Unistyles注册. 打电话 configureNeetoUI 从你的应用软件
进入点(index.js),在导入屏幕之前:
import { configureNeetoUI } from "@bigbinary/neetoui-rn/unistyles";
configureNeetoUI();
图书馆既装有光又装有暗的主题 将灯一接而来
默认 它没有遵循设备的颜色方案。 一个没有的应用程序
为暗模式设计了自己的屏幕,但只遵循了一半:符号类表面
暗去时,从字面颜色画出的任何东西 都保持光线,它出现
作为暗背景的暗文本和暗状态栏 dark-content
边框样式.
一旦屏幕准备好,请选择:
configureNeetoUI({ adaptiveThemes: true });
尽管导入了库根注册,但选择加入者仍受到尊重
首先默认,所以它工作从 index.js 无论单元评价如何
秩序。 秩序.
字体
theme.fonts 使用Inter( SIL 打开字体许可, 参见
assets/licenses/Inter-OFL.txt) (中文(简体) ). 链接应用程序的捆绑文件
react-native.config.js数字 :
module.exports = {
assets: ["./node_modules/@bigbinary/neetoui-rn/assets/fonts"],
};
然后运行 npx react-native-asset检查 UIAppFonts 内 Info.plist
财务报告和审定财务报表 android/app/src/main/assets/fonts 仅列出 Inter-*.ttf 文档.
从 3. x 升级, 将 SF Pro 捆绑: 重新运行 npx react-native-asset 这么说
SFProText-*.ttf 文件已取消链接, 任何 font 选项
configureNeetoUI,移动硬码样式 "SFProText-*" 名称改为
theme.fonts。 。 。 .
平板布局
平面由两相或三相平面平板壳所建. 壳本身, 其导航和任何持续宽度都留在应用程序中.
useTabletLayout()返回时{ width, height, isTablet, isLandscape }。 。 。 .isTablet当窗口的短边至少是TABLET_MIN_SHORT_SIDE(600dp),所以一个风景电话留在电话上 设置.isTabletWindow({ width, height })用于外部的同一检查 a 构成部分.NavRail是图标栏:links(单位:千美元){ key, label, Icon, activeOn? }, (中文(简体) ),activeRoute, (中文(简体) ),onNavigate附加时header财务报告和审定财务报表footer插槽 .NavRailItem框架页脚槽; 给它onPress用于按钮,或将其关闭以包装 处理自己的新闻的内容.ResizeHandle将列拖到它的左边。 父拥有宽度 重新激活共享价值和大小Animated.View从它; 把手 电话onCommit宽度和宽度onReset在双管上。 过accessibilityValue(单位:千美元){ min, max, now }所以屏幕阅读器可以读取 宽;它们按20平方步调整.clampListWidth内部保持宽度LIST_WIDTH_RANGE并且是一个工人.CenteredSheet电话屏幕显示为CENTERED_SHEET_WIDTH牌过 窗帘,有一个叫onClose名称accessibilityLabel。 。 。 .
常数 : RAIL_WIDTH, (中文(简体) ), LIST_WIDTH_DEFAULT, (中文(简体) ), LIST_WIDTH_RANGE, (中文(简体) ),
RESIZE_HANDLE_WIDTH, (中文(简体) ), CENTERED_SHEET_WIDTH, (中文(简体) ), TABLET_MIN_SHORT_SIDE。 。 。 .
反应-内在-安全区域-文本
我们正在使用SafeRea View从
react-native-safe-area-context
在我们 ParentView 用于处理安全区域的组件。 遵循下面的指示
SafeAreaProvider 联 合 国 ParentView 对工作的组成部分.
安全区提供商
你应该加上 SafeAreaProvider 在您的应用根组件中。 你也许需要
在使用方式和路线根等其他地方添加
react-native-screens。 。 。 .
注意供应商不应在 View 动画
Animated 或内部 ScrollView 因为它可以引起非常频繁的更新.
示例
import { SafeAreaProvider } from "react-native-safe-area-context";
function App() {
return <SafeAreaProvider>...</SafeAreaProvider>;
}
发展
通过执行以下命令安装所有依赖 .
yarn
新组件进入 src/components/<Name>/,从 src/index.ts, (中文(简体) ),
并携带一个位于同一地点 <Name>.stories.tsx 加号 __tests__/。 。 。 .
| 任务 | 命令 |
|---|---|
| 故事书 (网易) | yarn storybook |
| 构建故事书 | yarn build-storybook |
| 测试 | yarn test |
| 类型 | yarn typecheck |
| 林特 | yarn lint |
| 安装设备 | 见 example/ |
yarn build-storybook 将静态文件写入 storybook-static/。 。 。 .
自动发布给国家预防机制
需要UI- RN 版本得到补丁、自动加速度和自动发布到 npm 上
新承诺主要分支。 你可以去检查 publish github 工作流程
动作获取实时更新.
用 yalc 软件包管理器进行测试
在当地出版
yarn build && rm -rf ~/.yalc/packages && yalc publish --private
或者说
yarn yalc:publish
在任何应用程序中安装本地雅尔克版本的库.
rm -rf .yalc && yalc add @bigbinary/neetoui-rn && rm -rf node_modules && yarn
更多地了解对寄存器的贡献
https://github.com/bigbinary/neeto-ui-rn/blob/main/CONTRIBUTING.md 互联网档案馆的存檔,存档日期2014-12-21