README

durain-ui

一套拿来就用的 react-native 纯 js 组件。

TODO

Button
ButtonGroup
ButtonRadio
Cell
CellGroup
InputItem
Modal
Popup
Dialog
Toast
Tip
Carousel

组件使用说明

Button

按钮组件，依赖插件 react-native-linear-gradient 来实现渐变效果

代码示例

<Button type="primary">primary</Button>

<Button gradient gradientColors={['#f00', '#0f0']}>渐变</Button>

API 说明

ButtonGroup

按钮组组件

ButtonGroup 代码示例

<ButtonGroup style={styles.btnGroupWrap} size="xs">
  <Button type="primary">是</Button>
  <Button type="error">否</Button>
</ButtonGroup>

ButtonGroup API 说明

Cell

列表组件

Cell 代码示例

<Cell title="2/1期" value="420.0" label="应支付日：2019年06月21日" extra="已逾期" />

<Cell title="验证码" value={<Button size="md" shape="radius" outline type="primary" outlineColor="#f00">获取验证码</Button>} />

Cell API 说明

CellGroup

列表容器组件

CellGroup 代码示例

<CellGroup style={{ marginVertical: 20 }} borderOffset={0}>
  <Cell title="2/1期" value="420.0" />
  <Cell title="2/1期" value="420.0" />
  <Cell title="2/1期" value="420.0" />
  <Cell title="2/1期" value="420.0" />
</CellGroup>

CellGroup API 说明

属性 | 说明 | 类型 | 默认值 -| - | - | - paddingOffset | 内部 cell 左右间距 | Number | 12 style | 容器样式 | Object | -

InputItem

输入框组件

InputItem 代码示例

<InputItem label="手机号" />

<InputItem label="密码" type="password" value= {this.state.value1} />

InputItem API 说明

SplitLine

下划线

SplitLine 代码示例

<SplitLine />

SplitLine API 说明

Tip

提示组件

Tip 代码示例

<Tip type="error" radius={0}>radius: 0</Tip>

<Tip icon={tipIcon} extra={<Button type="primary" size="xs">立即拨打</Button>}>客服热线：400-0000-0000</Tip>

Tip API 说明

Carousel

轮播图组件。这个照搬 teaset 的

Carousel 代码示例

<Carousel
  style={{ height: 100 }}
  horizontal={this.state.horizontal}
  autoPlay={this.state.autoPlay}
  loop={this.state.loop}
  interval={this.state.interval}
  direction={this.state.direction}
  startIndex={this.state.startIndex}
  control={this.state.control}
>
  <View style={{ backgroundColor: Theme.primary, height: '100%' }}><Text>1</Text></View>
  <View style={{ backgroundColor: Theme.info, height: '100%' }}><Text>2</Text></View>
  <View style={{ backgroundColor: Theme.success, height: '100%' }}><Text>3</Text></View>
  <View style={{ backgroundColor: Theme.warning, height: '100%' }}><Text>4</Text></View>
  <View style={{ backgroundColor: Theme.error, height: '100%' }}><Text>5</Text></View>
</Carousel>

Carousel API 说明

属性 | 说明 | 类型 | 默认值 -| - | - | - horizontal | 水平轮播还是垂直轮播 | Boolean | true autoPlay | 自动轮播 | Boolean | true interval | 每页停留时间 | Number | 3000 direction | 方向 | 可选值为 forward、backward | forward startIndex | 初始显示的页数 | Number | 0 loop | 是否循环轮播 | Boolean | false control | 指示器。为 false 则不显示指示器；若想自定义指示器，传递组件即可，会自动获取三个参数 {index, total, carousel } | Boolean | Element | false

Modal

弹框组件

Modal 代码示例

<Modal visible={this.state.isShowModal} width="90">
  {this.renderDemoText()}
  <Button type="primary" size="lg">Close</Button>
</Modal>

Modal API 说明

Popup

弹出组件。套用的是 Modal 组件，因此，Modal 的属性，同样适用于该组件。

Popup 代码示例

<Popup visible={this.state.isShow}>
  ...
</Popup>

Popup API 说明

属性 | 说明 | 类型 | 默认值 -| - | - | - visible | 控制弹框显示隐藏 | Boolean | false placement | 弹框出现位置 | String | bottom splitLineProps | 下划线属性 | Object | -

PopupHeader

弹出组件的标题组件。

PopupHeader 代码示例

<Popup visible={this.state.isShow}>
  <PopupHeader onLeftPress={} onRightPress={} />
  ...
</Popup>

PopupHeader API 说明

ActionSheet

Action Sheet是由用户操作后触发的一种特定的模态弹出框。套用的是 Modal 组件，因此，Modal 的属性，同样适用于该组件。

menus 数组，是按钮的属性对象，因此，可参考 Button 组件

ActionSheet 代码示例

<ActionSheet
  visible={this.state.isShow}
  theme={this.state.theme}
  onMaskPress={() => {this.setValueByKey('isShow', false); }}
  onCancelPress={() => {this.setValueByKey('isShow', false); }}
  menus={menusObj[this.state.menus]}
  maskClosable={this.state.maskClosable}
  showCancel={this.state.showCancel}
  cancelText={this.state.cancelText}
  header={this.state.header ? headerObj[this.state.header] : undefined}
  onMenuPress={(data) => {
    this.setValueByKey('isShow', false);
  }}
>
  {this.renderDemoText()}
  <Button type="primary" size="lg" onPress={() => {this.setValueByKey('isShow', false); }}>close</Button>
</ActionSheet>

ActionSheet API 说明

Dialog

对话框组件，套用的是 Modal 组件，因此，Modal 的属性，同样适用于该组件。