Ant Design Mobile React-Native 自定义主题

Question

我正在尝试在 Ant Design Mobile React-Native 中自定义主题。我正在使用 Expo-cli。

我试过分叉https://github.com/ant-design/ant-design-mobile-rn

并自定义https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx、

中的主题变量

但是当我安装分叉回购并使用 import {Button} from '@ant-design/react-native/lib/button' 时，它导致错误 "Unable to resolve @ant-design/react-native/lib"。

然后我将文件夹 "components" 重命名为 "lib" 并删除 .gitignore 文件中的 /lib 并重新安装分叉的 repo。它现在有效，但我不确定我做的是对的。请帮我检查一下使用forked repo的方法是否正确。

Answer 1

执行我在上面中建议的步骤是：

确保您有 Github 帐户并已登录。
转到您要分叉的存储库并单击分叉按钮（见图）

将存储库分叉到您的 Github 帐户后，您现在可以根据需要进行任何更改。您可能希望将您的存储库副本克隆到您的计算机上以执行此操作。如果更改较小，可以在 Github 上完成。
在您的存储库中进行更改后，您需要推送这些更改，以便它们在您的存储库中可用。
现在您的更改在存储库中可用，您可以在您的项目中使用它们。为此，您需要删除以前安装的 repo（如果有的话），然后安装您的分叉版本。

您使用以下格式安装它npm install --save username/repo#branch-name

当我需要的回购没有更新并且需要重大升级才能让他们使用新版本的 RN 时，我已经多次使用这种方法。

我通常也希望对我的更改提出拉取请求，尤其是如果我所做的会让其他用户受益。

测试时，您可能希望使用存储库的本地副本，而不是存储在 Github 上的副本。 SO answer 展示了如何做到这一点。

基本上，在您的 package.json 的依赖项部分中，使用适当的名称添加到本地存储库副本的路径。

"dependencies": {
    "bar": "file:../foo/bar"
}

Answer 2

我找到了自定义主题的正确方法，即使用“Provider”。

import {Provider} from '@ant-design/react-native';
import customTheme from './customTheme';

<Provider theme={customTheme}>
  <App />
</Provider>

customTheme.tsx 文件

const brandPrimary = '#42b549';
const brandPrimaryTap = '#5CCF63';

export default {
  // 支付宝钱包默认主题
  // https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范

  // 色彩, NOTE: must use `#000000` instead of `#000`
  // https://facebook.github.io/react-native/docs/colors.html
  // 8-digit-hex to 4-digit hex https://css-tricks.com/8-digit-hex-codes/
  // https://www.chromestatus.com/feature/5685348285808640 chrome will support `#RGBA`
  // 文字色
  color_text_base: '#000000',                  // 基本
  color_text_base_inverse: '#ffffff',          // 基本 _ 反色
  color_text_secondary: '#a4a9b0',          // 辅助色
  color_text_placeholder: '#bbbbbb',           // 文本框提示
  color_text_disabled: '#bbbbbb',              // 失效
  color_text_caption: '#888888',               // 辅助描述
  color_text_paragraph: '#333333',             // 段落
  color_link: brandPrimary,                 // 链接

  // 背景色
  fill_base: '#ffffff',                           // 组件默认背景
  fill_body: '#f5f5f9',                        // 页面背景
  fill_tap: '#dddddd',                            // 组件默认背景 _ 按下
  fill_disabled: '#dddddd',                       // 通用失效背景
  fill_mask: 'rgba(0, 0, 0, .4)',              // 遮罩背景
  color_icon_base: '#cccccc',                     // 许多小图标的背景，比如一些小圆点，加减号
  fill_grey: '#f7f7f7',

  // 透明度
  opacity_disabled: '0.3',   // switch checkbox radio 等组件禁用的透明度

  // 全局/品牌色
  brand_primary: brandPrimary,
  brand_primary_tap: brandPrimaryTap,
  brand_success: '#6abf47',
  brand_warning: '#f4333c',
  brand_error: '#f4333c',
  brand_important: '#ff5b05',  // 用于小红点
  brand_wait: '#108ee9',

  // 边框色
  border_color_base: '#dddddd',

  // 字体尺寸
  // ---
  font_size_icontext: 10,
  font_size_caption_sm: 12,
  font_size_base: 14,
  font_size_subhead: 15,
  font_size_caption: 16,
  font_size_heading: 17,

  // 圆角
  // ---
  radius_xs: 2,
  radius_sm: 3,
  radius_md: 5,
  radius_lg: 7,

  // 边框尺寸
  // ---
  border_width_sm: 0.5,
  border_width_md: 1,
  border_width_lg: 2,

  // 间距
  // ---
  // 水平间距
  h_spacing_sm: 5,
  h_spacing_md: 8,
  h_spacing_lg: 15,

  // 垂直间距
  v_spacing_xs: 3,
  v_spacing_sm: 6,
  v_spacing_md: 9,
  v_spacing_lg: 15,
  v_spacing_xl: 21,

  // 高度
  // ---
  line_height_base: 1,           // 单行行高
  line_height_paragraph: 1.5,    // 多行行高

  // 图标尺寸
  // ---
  icon_size_xxs: 15,
  icon_size_xs: 18,
  icon_size_sm: 21,
  icon_size_md: 22,       // 导航条上的图标
  icon_size_lg: 36,

  // 动画缓动
  // ---
  ease_in_out_quint: 'cubic_bezier(0.86, 0, 0.07, 1)',

  // 组件变量
  // ---

  actionsheet_item_height: 50,
  actionsheet_item_font_size: 18,

  // button
  button_height: 47,
  button_font_size: 18,

  button_height_sm: 23,
  button_font_size_sm: 12,

  primary_button_fill: brandPrimary,
  primary_button_fill_tap: brandPrimaryTap,

  ghost_button_color: brandPrimary,    // 同时应用于背景、文字颜色、边框色
  ghost_button_fill_tap: `${brandPrimary}99`, // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW

  warning_button_fill: '#e94f4f',
  warning_button_fill_tap: '#d24747',

  link_button_fill_tap: '#dddddd',
  link_button_font_size: 16,

  // modal
  modal_font_size_heading: 18,
  modal_button_font_size: 18, // 按钮字号
  modal_button_height: 50, // 按钮高度

  // list
  list_title_height: 30,
  list_item_height_sm: 35,
  list_item_height: 44,

  // input
  input_label_width: 17,       // InputItem、TextareaItem 文字长度基础值
  input_font_size: 17,
  input_color_icon: '#cccccc',
  input_color_icon_tap: brandPrimary,

  // tabs
  tabs_color: brandPrimary,
  tabs_height: 42,
  tabs_font_size_heading: 15,

  // segmented_control
  segmented_control_color: brandPrimary,  // 同时应用于背景、文字颜色、边框色
  segmented_control_height: 27,
  segmented_control_fill_tap: `${brandPrimary}10`,

  // tab_bar
  tab_bar_fill: '#ebeeef',
  tab_bar_height: 50,

  // toast
  toast_fill: 'rgba(0, 0, 0, .8)',

  // search_bar
  search_bar_fill: '#efeff4',
  search_bar_height: 44,
  search_bar_input_height: 28,
  search_bar_font_size: 15,
  search_color_icon: '#bbbbbb', // input search icon 的背景色

  // notice_bar
  notice_bar_fill: '#fffada',
  notice_bar_height: 36,

  // switch
  switch_fill: '#4dd865',

  // tag
  tag_height: 25,
  tag_small_height: 15,

  // picker
  option_height: 42,            // picker 标题的高度

  toast_zindex: 1999,
  action_sheet_zindex: 1000,
  popup_zindex: 999,
  modal_zindex: 999,
};

Ant Design Mobile React-Native 自定义主题

Customize Theme in Ant Design Mobile React-Native

less

reactjs

react-native

antd

ant-design-pro