durain-ui v1.0.0

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 说明

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 说明

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 说明

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 的属性，同样适用于 该组件。

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

Dialog 代码示例

<Dialog
  visible={this.state.isShow}
  onCancelPress={() => {this.setValueByKey('isShow', false); }}
  onMenuPress={(v) => {
    console.log(v, 'menu');
    this.setValueByKey('isShow', false);
  }}
  title="弹框标题"
  msg="弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
  menus={this.state.menusObj[this.state.menus]}
>
</Dialog>

Dialog API 说明

参考

非常感谢 teaset 这个项目，学到很多。