react-native-centerm-sdk

<!-- * @Description: In User Settings Edit * @Author: Gaohan * @Date: 2019-07-23 14:16:43 * @LastEditTime: 2019-09-29 11:38:55 * @LastEditors: Please set LastEditors -->

Usage no npm install needed!

<script type="module">
  import reactNativeCentermSdk from 'https://cdn.skypack.dev/react-native-centerm-sdk';
</script>

README

React-Native-Centerm-Sdk

A UI library for react-native. build for Centerm Stuff. 服务于升腾雨滴的企业级UI库

Build Status codecov

INSTALL

npm i react-native-centerm-sdk --save

or

yarn add react-native-centerm-sdk

Components

Button

<Button /> 按钮

import { Button } from 'react-native-centerm-sdk';

class Page extends React.Component<any, any> {
  render () {
    return (
      <Button title="hello world" />
    );
  }
}

ListItem

<ListItem /> 列表行

import { ListItem } from 'react-native-centerm-sdk';

class Page extends React.Component<any, any> {
  render () {
    return (
      <View>
        <ListItem
          icon={{uri: 'http://net.huanmusic.com/react.png'}}
          bottomBorder={true}
          title={'React Native'}
          subTitle="React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。"
        />
        <ListItem
          icon={{uri: 'http://net.huanmusic.com/react.png'}}
          bottomBorder={true}
          title={'ListItem Uasge'}
          detailTitle={'SwipeButton'}
          detailSubTitle={'Uasge'}
          swipeButtons={[
            <ListItemSwipeButton onPress={() => { console.log('cancel'); }} title="cancel" type="cancel" key="cancel" />,
            <ListItemSwipeButton onPress={() => { console.log('info'); }} title="info" type="info" key="info" />,
            <ListItemSwipeButton onPress={() => { console.log('delete'); }} title="delete" type="delete" key="delete" />,
          ]}
        />
      </View>
    );
  }
}