Ant-Design-Mobile在React-Native下自定义主题

1
1

第一步 安装 antd-mobile

    npm install antd-mobile --save
    npm install babel-plugin-import --save //这个是必须的

第二部 修改 .babelrc 文件

    {
        "presets": [
            "react-native"
        ],
        //添加如下部分
        "plugins": [
            [
                "import",
                {
                    "libraryName": "antd-mobile"
                }
            ]
        ]
    }

第三部 创建 ./scripts/custom-rn-theme.js 文件

    const path = require( 'path' );
    const fs   = require( 'fs' );

    const defaultVars = require( 'antd-mobile/lib/style/themes/default' );
    const customVars  = require( '../theme' );
    const themePath   = path.resolve( require.resolve( 'antd-mobile' ) , '../style/themes/default.js' );

    const themeVars = Object.assign( {} , defaultVars , customVars );
    if ( fs.statSync( themePath ).isFile() ) {
      fs.writeFileSync(
        themePath ,
        'var brandPrimary = "#108ee9"; var brandPrimaryTap = "#1284d6";module.exports = ' + JSON.stringify( themeVars )
      );
    }

第四部 创建 theme.js 文件

    module.exports = {
      color_text_base : '#000' ,
      color_text_base_inverse : '#fff' ,
      color_text_secondary : '#a4a9b0' ,
      color_text_placeholder : '#bbb' ,
      color_text_disabled : '#bbb' ,
      color_text_caption : '#888' ,
      color_text_paragraph : '#333' ,
      color_link : 'red' ,
      color_shadow : 'rgba(0, 0, 0, .21)' ,
      
      brand_primary : '#FF8D59' ,
      brand_primary_tap : '#1284d6' ,
      brand_success : '#6abf47' ,
      brand_warning : '#f4333c' ,
      brand_error : '#f4333c' ,
      brand_hot : '#f96268' ,
      brand_important : '#ff5b05' ,
      border_color_base : '#C9C9C9' ,
      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 ,
      font_size_display_sm : 18 ,
      font_size_display_md : 21 ,
      font_size_display_lg : 24 ,
      font_size_display_xl : 30 ,
      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 ,
      option_height : 42 ,
      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)' ,
      button_height : 42 ,
      button_font_size : 18 ,
      button_height_sm : 23 ,
      button_font_size_sm : 12 ,
      across_button_height : 50 ,
      primary_button_fill : '#FF8D59' ,
      primary_button_fill_tap : '#ccc' ,
      ghost_button_color : '#FF8D59' ,
      ghost_button_fill_tap : '#fff' ,
      link_button_fill_tap : '#ddd' ,
      link_button_font_size : 16 ,
      list_title_height : 30 ,
      list_item_height_sm : 35 ,
      list_item_height : 45 ,
      input_label_width : 17 ,
      input_font_size : 17 ,
      input_color_icon : '#ccc' ,
      input_color_icon_tap : '#108ee9' ,
      tabs_color : '#108ee9' ,
      tabs_height : 42 ,
      tabs_font_size_heading : 15 ,
      segmented_control_color : '#FF8D59' ,
      segmented_control_height : 27 ,
      segmented_control_fill_tap : '#FF8D59' ,
      tab_bar_fill : '#ebeeef' ,
      tab_bar_height : 50 ,
      search_bar_fill : '#efeff4' ,
      search_bar_input_height : 28 ,
      searchbar_font_size : 15 ,
      search_color_icon : '#bbbbbb' ,
      notice_bar_fill : '#fffada' ,
      notice_bar_height : 36 ,
      switch_fill : '#4dd865' ,
      tag_height : 24 ,
      tag_small_height : 14 ,
      table_title_height : 30 ,
      toast_zindex : 1999 ,
      action_sheet_zindex : 1000 ,
      popup_zindex : 999 ,
      modal_zindex : 999
    };

完整样式可以访问这里

最后一步

执行 node scripts/custom-rn-theme.js

提示

以后只要修改 theme.js文件即可,修改后需要重新启动应用

评论(1)

发表评论

DMGChat