node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

rnkit-mobile

react-native的UI组件库

 
## UI公共组件

QMBadge QMButton QMCheckBox QMRadio QMList QMSwitch QMIcon | 自定义字体图标库 QMInputItem
QMStepper | 数字加减输入框 QMSwipeAction | 滑动操作(左滑删除) QMTabs QMTag | 历史记录、赠品、营销活动标签 QMToast | 轻提示

d2p封装

QMKit
QMText
QMForm
QMConst
QMFetch
QMPopUp
QMRoute
QMLoading
QMTextInput
QMPullToRefresh
QMPullToRefreshList
 
### react-native 组件规范
 
无特殊情况(iOS Android 代码完全一致)不用带后缀.
 
- 组件`src/qmkit/button/index.tsx`
 
```jsx
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
 
// 可独立到 src/qmkit/button/style/index.tsx
const styles = StyleSheet.create({
button: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
});
 
export default class QMButton extends React.Component {
render() {
return (
<View style={[styles.button]}>
{this.props.children}
</View>
);
}
}
 
export default QMButton;
  • 示例src/apps/demo-button/index.tsx
import { QMButton } from 'qmkit';
import * as React from 'react';
import { Text, View } from 'react-native';
 
export default class DemoButton extends React.Component {
render() {
return <QMButton><Text>basic button</Text></QMButton>;
}
}