rn-app/assets/styles/css.js

import { StyleSheet, StatusBar } from 'react-native';

// create useStyles hooks
export const useStyles = (props = {}) =>
  StyleSheet.create({ value: props }).value;

export const paddingTopStatusBarHeight = useStyles({
  paddingTop: StatusBar.currentHeight || 0,
});
export const statusBarHeight = useStyles({
  height: StatusBar.currentHeight || 0,
});
export const flexRow = useStyles({
  display: 'flex',
  flexDirection: 'row',
});
export const flexColumn = useStyles({
  display: 'flex',
  flexDirection: 'column',
});
export const flexSub = useStyles({
  flex: 1,
});
export const flexShrink = useStyles({
  flexShrink: 0,
});
export const flexWrap = useStyles({
  flexWrap: 'wrap',
});
export const flexnoWrap = useStyles({
  flexWrap: 'nowrap',
});
export const justifyStart = useStyles({
  justifyContent: 'flex-start',
});
export const justifyEnd = useStyles({
  justifyContent: 'flex-end',
});
export const justifyCenter = useStyles({
  justifyContent: 'center',
});
export const justifyBetween = useStyles({
  justifyContent: 'space-between',
});
export const justifyAround = useStyles({
  justifyContent: 'space-around',
});
export const justifyEvenly = useStyles({
  justifyContent: 'space-evenly',
});

export const alignItemsStart = useStyles({
  alignItems: 'flex-start',
});
export const alignItemsEnd = useStyles({
  alignItems: 'flex-end',
});

export const alignItemsCenter = useStyles({
  alignItems: 'center',
});
export const alignItemsStretch = useStyles({
  alignItems: 'stretch',
});

export const positionRelative = useStyles({
  position: 'relative',
});
export const positionAbsolute = useStyles({
  position: 'absolute',
});

export const positionSticky = useStyles({
  position: 'sticky',
});

export const positionStatic = useStyles({
  position: 'static',
});

export const positionFixed = useStyles({
  position: 'fixed',
});

export const getColor = (color = {brandPrimary: '#ff6600', brandPrimaryTap: '#ff6600' }) => {
  const brandPrimary = color.brandPrimary || '#108ee9';
  const brandPrimaryTap = color.brandPrimaryTap || '#1284d6'; 
  return {
	transparent: 'transparent', 
	brandPrimary,
	brandPrimaryTap,

    // 文字色
    color_text_base: color.color_text_base || '#000000', // 基本
    color_text_base_inverse: color.color_text_base_inverse || '#ffffff', // 基本 _ 反色
    color_text_placeholder: color.color_text_placeholder || '#bbbbbb', // 文本框提示
    color_text_disabled: color.color_text_disabled || '#bbbbbb', // 失效
    color_text_caption: color.color_text_caption || '#888888', // 辅助描述
    color_text_paragraph: color.color_text_paragraph || '#333333', // 段落
    color_link: color.color_link || brandPrimary, // 链接
    color_icon_base: color.color_icon_base || '#cccccc', // 许多小图标的背景，比如一些小圆点，加减号

    // 背景色
    fill_body: color.fill_body || '#f5f5f9', // 页面背景
    fill_base: color.fill_base || '#ffffff', // 组件默认背景
    fill_tap: color.fill_tap || '#dddddd', // 组件默认背景 _ 按下
    fill_disabled: color.fill_disabled || '#dddddd', // 通用失效背景
    fill_mask: color.fill_mask || 'rgba(0, 0, 0, .4)', // 遮罩背景
    fill_grey: color.fill_grey || '#f7f7f7',

    // 全局/品牌色
    brand_primary: color.brand_primary || brandPrimary,
    brand_primary_tap: color.brand_primary_tap || brandPrimaryTap,
    brand_success: color.brand_success || '#6abf47',
    brand_warning: color.brand_warning || '#faad14',
    brand_error: color.brand_error || '#f4333c', // 错误(form validate)
    brand_important: color.brand_important || '#ff5b05', // 用于小红点

    // 边框色
    border_color_base: color.border_color_base || '#dddddd', // 基础的
    border_color_thin: color.border_color_thin || '#eeeeee', // 更细的

    primary_button_fill: color.primary_button_fill || brandPrimary,
    primary_button_fill_tap: color.primary_button_fill_tap || brandPrimaryTap,

    ghost_button_color: color.ghost_button_color || brandPrimary, // 同时应用于背景、文字颜色、边框色
    ghost_button_fill_tap: color.ghost_button_fill_tap || `${brandPrimary}99`, // alpha 60% 

    warning_button_fill: color.warning_button_fill || '#e94f4f',
    warning_button_fill_tap: color.warning_button_fill_tap || '#d24747',

    // tab_bar
    tab_bar_fill: color.tab_bar_fill || '#ebeeef',

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

    // search_bar
    search_bar_fill: color.search_bar_fill || '#efeff4',
    search_color_icon: color.search_color_icon || '#bbbbbb', // input search icon 的背景色

    // notice_bar
    notice_bar_fill: color.notice_bar_fill || '#fffada',

    // checkbox
    checkbox_fill_disabled: color.checkbox_fill_disabled || '#f5f5f5',
    checkbox_border: color.checkbox_border || '#d9d9d9',
    checkbox_border_disabled: color.checkbox_border_disabled || '#b9b9b9',

    // switch
    switch_unchecked: color.switch_unchecked || '#cccccc',
    switch_unchecked_disabled: color.switch_unchecked_disabled || '#cccccc66', // switch_fill的40%透明度

    // tooltip
    tooltip_dark: color.tooltip_dark || 'rgba(0, 0, 0, 0.9)',
  };
};

export const getColorStyles = color => {
  return {
    default: useStyles({
      color: color.default,
    }),
    defaultBg: useStyles({
      backgroundColor: color.default,
    }),
    primary: useStyles({
      color: color.primary,
    }),
    primaryBg: useStyles({
      backgroundColor: color.primary,
    }),
  };
};

export default {
  statusBarHeight,
  paddingTopStatusBarHeight,
  flexRow,
  flexColumn,
  flexSub,
  flexShrink,
  flexWrap,
  flexnoWrap,
  justifyStart,
  justifyEnd,
  justifyCenter,
  justifyBetween,
  justifyAround,
  justifyEvenly,
  alignItemsStart,
  alignItemsEnd,
  alignItemsCenter,
  alignItemsStretch,
  positionRelative,
  positionAbsolute,
  getColor,
  getColorStyles,
  useStyles,
};