Skip to content

Latest commit

 

History

History
182 lines (131 loc) · 3.76 KB

development.en-US.md

File metadata and controls

182 lines (131 loc) · 3.76 KB
Raw

Development

Environment

node = 16.20.0+
npm = 8.19.4+

Code convention for @ant-design/react-native

TypeScript

$ npm run lint

Directory Structure

├── CHANGELOG.xxx.md        changelog document
├── LICENSE                 license
├── README.md               readme document
├── components              components source code
├── development.xxx.md      development document
├── docs                    other docs
├── example                 Expo demo project source code
├── rn-kitchen-sink         RN demo project source code
├── scripts                 scripts for development
├── site                    offical website source code
├── tests                   test code
├── tsconfig.json           TypeScript config
├── typings                 mistake defined for TypeScript

API Design Philosophy

Basic principles:

  1. remain the same with react-native as much as possible.
  2. components which react-native do not have, should follow antd convention。
  3. components which totally new, please open a issue and we will discuss about it.

component name separate with -, such as date-picker，and file Extensions should be .tsx。

Components Implementation

  • prefer to use react-component, you can PR to react-component if you find any problem.
  • complicated component should abstract it's basic logic into react-component
  • any problem you do not sure, open a issue and discuss.

Samples

general we do not distinguish Android and Ios, so no suffix.

  • components/button/index.tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';

// just a example, may extract style to components/button/style/index.tsx
const styles = StyleSheet.create({
  button: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
});

class Button extends React.Component {
  render() {
    return <View style={[styles.button]}>{this.props.children}</View>;
  }
}

export default Button;
  • components/button/demo/basic.tsx
import { Button } from '@ant-design/react-native';
import * as React from 'react';
import { Text, View } from 'react-native';

class BasicButtonExample extends React.Component {
  render() {
    return (
      <Button>
        <Text>basic button</Text>
      </Button>
    );
  }
}

exports.title = 'Button';
exports.description = 'button example';
exports.demo = BasicButtonExample;

Development

  • Running On Expo

node >= 18

# go to expo example folder
cd example

# install dependencies
npx expo install

# start expo
npm start
  • Running On react-native-cli
# clone
$ npm install

# start ios
cd rn-kitchen-sink/ios && pod install
$ npm run ios

# start android
$ npm run android

The code of demo app: https://github.com/ant-design/ant-design-mobile-rn/tree/master/rn-kitchen-sink

If you need to add a new component, then modify rn-kitchen-sink/demoList.js and ./index.js.

Tips about Pull Request

Fork and git clone, and check a new branch from master.

git checkout -b xx-feature

After you are done.

$ git add --all
$ git commit -am "some description"
$ git pull --rebase origin master
# fix some conflict if need be
$ git push origin xx-feature:xx-feature

Open Pull Request, assign a owner, and we will follow and review this.

After you pr is merged into master.

$ git checkout master
$ git pull

Run tests

Run all test:

$ npm run test:all

Update snapshot：

$ npm run test -- -u

Run specific test:

$ npm run test -- components/button/__tests__/index.test.js -t 'pressIn'