kenote-react-native-design v2.0.0-alpha.2

kenote-react-native-design

一个关于 React Native 的 UI组件库，基于 react 15.4.x 和 react-native 0.42.x

相关依赖

• react-native-spinkit
• react-native-vector-icons

安装

npm

npm i --save kenote-react-native-design

yarn

yarn add kenote-react-native-design

Button

使用

import { Button } from 'kenote-react-native-design'

方式一

<Button
  style={{ backgroundColor: '#666666' }}
  label={'按钮'}
  labelStyle={{ fontSize: 18, color: '#ffffff' }}
  icon={'home'}
  iconColor={'#ffffff'}
  iconSize={20}
  disabled
  disabledStyle={{ backgroundColor: '#999999' }}
  onPress={() => console.log('点击事件')}
  />

方式二

<Button
  style={{ backgroundColor: '#666666' }}
  disabled
  disabledStyle={{ backgroundColor: '#999999' }}
  onPress={() => console.log('点击事件')}>
  <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
    <Icon name={'home'} size={20} color={'#ffffff'} />
    <Text style={{ fontSize: 18, color: '#ffffff' }}>
      按钮
    </Text>
  </View>
 </Button>

Props

LeftButton

使用

import { LeftButton } from 'kenote-react-native-design'

<LeftButton
  style={{ backgroundColor: '#666666' }}
  label={'后退'}
  color={'#ffffff'}
  onPress={() => console.log('后退')}
  />

Props

RightButton

使用

import { RightButton } from 'kenote-react-native-design'

<RightButton
  style={{ backgroundColor: '#666666' }}
  label={'前进'}
  color={'#ffffff'}
  onPress={() => console.log('前进')}
  />

Props

Form

使用

import { Form } 'kenote-react-native-design'

const options = [
  {
    type: 'forminput',
    name: 'username',
    label: '用户名',
    labelIcon: 'user',
    labelColor: '#8cc3b2',
    placeholder: '用户名/邮箱',
    returnKeyType: 'next',
    isRequired: true
  },
  {
    type: 'forminput',
    name: 'password',
    label: '密  码',
    labelIcon: 'lock',
    labelColor: '#8cc3b2',
    placeholder: '密码',
    password: true,
    returnKeyType: 'default',
    isRequired: true
  }
]

<Form
  ref={'formlogin'}
  options={options}
  buttonLabel={'登 录'}
  buttonPress={ e => console.log(e) } />
// e = { username: '', password: '' }

Options Element

{
  type              : 'forminput',  // 单元类型，目前只支持 'forminput'
  name              : 'username',   // 单元名称
  label             : '用户名',      // 单元标签
  labelIcon         : 'user',       // 单元标签图标；如果启用，label则失效
  labelColor        : '#8cc3b2',    // 单元标签颜色
  placeholder       : '密码',        // 单元描述文字
  placeholderColor  : '#ccc',       // 单元描述文字颜色
  password          : true,         // 是否是密码类型
  keyboardType      : 'default',    // 手机键盘类型; 'default'|'numeric'|'email-address'|'ascii-capable'|'numbers-and-punctuation'|'url'|'number-pad'|'phone-pad'|'name-phone-pad'|'decimal-pad'|'twitter'|'web-search'
  returnKeyType     : 'default',    // 手机键盘`return`键类型; 'default'|'go'|'google'|'join'|'next'|'route'|'search'|'send'|'yahoo'|'done'|'emergency-call'
  isRequired        : true          // 是否必填项
}

Props