Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__
android
ios
scripts use antd-mobile-rn for react native Jun 5, 2018
.babelrc
.buckconfig add rn custom theme demo Feb 22, 2017
.flowconfig
.gitattributes add rn custom theme demo Feb 22, 2017
.gitignore
.watchmanconfig
README.md use antd-mobile-rn for react native Jun 5, 2018
app.json add rn custom theme demo Feb 22, 2017
index.android.js add rn custom theme demo Feb 22, 2017
index.ios.js use antd-mobile-rn for react native Jun 5, 2018
inputStyle.js
package.json
theme.js add rn custom theme demo Feb 22, 2017

README.md

antd-mobile-rn with rn custom ui

single component

version 1.x: https://github.com/ant-design/ant-design-mobile/issues/1174

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

    import InputItemStyle from 'antd-mobile-rn/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: https://github.com/ant-design/ant-design-mobile/pull/1629

  1. import the component origin style of antd-mobile-rn, eg:
import InputItemStyle from 'antd-mobile-rn/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-rn/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-rn'), '../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",
  ...
}
``
You can’t perform that action at this time.