Skip to content

Latest commit

 

History

History
 
 

rn-custom-ui

README.md

antd-mobile with rn custom ui

single component

version 1.x: ant-design/ant-design-mobile#1174

  1. import the component origin style of antd-mobile, eg:

    import InputItemStyle from 'antd-mobile/lib/input-item/style/index';

  2. find and replace the object key which you want to custom, eg:

     const newStyle = {};
 for (const key in InputItemStyle) {
   if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
     newStyle[key] = { ...StyleSheet.flatten(InputItemStyle[key]) };
     if (key === 'input') {
       newStyle[key].fontSize = 15;
     }
   }
 }

  3. pass newStyle to component styles property, eg:

const MyComponent = () => (
  <InputItem styles={StyleSheet.create(newStyle)} />
)

version 2.0: ant-design/ant-design-mobile#1629

  1. import the component origin style of antd-mobile, eg:
import InputItemStyle from 'antd-mobile/lib/input-item/style/index.native';
  1. find and replace the object key which you want to custom, eg:
export default {
  ...InputItemStyle,
  input: {
    ...InputItemStyle.input,
    fontSize: 15,
  }
}
  1. pass newStyle to component styles property, eg:
const MyComponent = () => (
  <InputItem styles={StyleSheet.create(newStyle)} />
)

custom theme

  1. create theme.js file in project path, add variables; eg:
module.exports = {
  brand_primary: 'red',
  color_link: 'red',
  border_color_base: 'green',
};
  1. create file scripts/custom-rn-theme.js which content is:
const path = require('path');
const fs = require('fs');
// for 1.x
// const defaultVars = require('antd-mobile/lib/style/themes/default');
// for 2.x
const defaultVars = require('antd-mobile/lib/style/themes/default.native');
const customVars = require('../theme');
// for 1.x
// const themePath = path.resolve(require.resolve('antd-mobile'), '../style/themes/default.js');
// for 2.x
const themePath = path.resolve(require.resolve('antd-mobile'), '../style/themes/default.native.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)
  );
}
  1. change scripts start of package.json to :
{
  ...
  "start": "node scripts/custom-rn-theme && node node_modules/react-native/local-cli/cli.js start",
  ...
}
``