How do you create and use a custom theme using antd-mobile-rn? - react-native

Question

I want to create and use a custom theme for the antd-mobile-rn library, the Website directs me to: https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui#antd-mobile-with-rn-custom-ui
I followed the instructions, but he colors remain default. I would prefer not to ass a style to each and every element in my app.
so 2 main questions:
1. how could i debug the script that is called in the package.json "start"
2. has anyone done this and gotten it to work, particularly in react-native

Answer 1

I was able to customize the theme by passing the custom theme file to the ant design "Provider".
You can retrieve the default theme file of antd-mobile-rn here https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx
import {Provider} from '#ant-design/react-native';
import customTheme from './customTheme';
<Provider theme={customTheme}>
<App />
</Provider>
customTheme.tsx file
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,
};