react-natvie-purple v0.0.2

react-native-purple FrameWork

##写在前面 继purple-net后基于react-native 实现react-native-purple框架（代码风格参考 react-native-elements ）

UI TookIt util

Get Started

If you are using Exponent, you can run npm i react-native-purple --save and skip to step 3.

Step 1

Install react-native-vector-icons (if you do not already have it)

npm i react-native-vector-icons --save && react-native link react-native-vector-icons

If you have any issues with icons not working or installation of React Native Vector Icons, check out their installation guide here

Step 2

Install React Native Purple

npm i react-native-purple --save

or

yarn add react-native-purple

Step 3

Start using components

import {
  PurpleButton
} from 'react-native-purple'

< PurpleButton
  raised
  icon={{name: 'cached'}}
  title='RAISED WITH ICON' />

<PurpleButton
  raised
  icon={{name: 'cached'}}
  title='RAISED WITH ICON'
  fontFamily='Comic Sans MS' />

API

Buttons

Buttons take a title and an optional material icon name, as well as the props below.

You can override Material icons with one of the following: zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop.

import { Button } from 'react-native-purple'

<PurpleButton
  title='BUTTON' />

<PurpleButton
  raised
  icon={{name: 'cached'}}
  title='BUTTON WITH ICON' />

<PurpleButton
  large
  iconRight
  icon={{name: 'code'}}
  title='LARGE WITH RIGHT ICON' />

<PurpleButton
  large
  icon={{name: 'envira', type: 'font-awesome'}}
  title='LARGE WITH RIGHT ICON' />

<PurpleButton
  large
  icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
  title='OCTICON' />

PurpleButton props

Also recevies all TouchableWithoutFeedback props

Social Icons & Buttons

import { SocialIcon } from 'react-native-purple'

// Icon
<SocialIcon
  type='twitter'
/>

<SocialIcon
  raised={false}
  type='gitlab'
/>

<SocialIcon
  light
  type='medium'
/>

<SocialIcon
  light
  raised={false}
  type='medium'
/>


// Button
<SocialIcon
  title='Sign In With Facebook'
  button
  type='facebook'
/>

<SocialIcon
  title='Some Twitter Message'
  button
  type='twitter'
/>

<SocialIcon
  button
  type='medium'
/>


<SocialIcon
  button
  light
  type='instagram'
/>

SocialIcon props

Icons & Icon Buttons

Icons take the name of a material icon as a prop.

You can override Material icons with one of the following: font-awesome, octicon, ionicon, foundation, evilicon, zocial, or entypo by providing a type prop.

Hint: use reverse to make your icon look like a button

import { Icon } from 'react-native-purple'

<Icon
  name='rowing' />

<Icon
  name='g-translate'
  color='#00aced' />

<Icon
  name='sc-telegram'
  type='evilicon'
  color='#517fa4'
/>

<Icon
  reverse
  name='ios-american-football'
  type='ionicon'
  color='#517fa4'
/>

<Icon
  raised
  name='heartbeat'
  type='font-awesome'
  color='#f50'
  onPress={() => console.log('hello')} />

Icon props

Lists

Using Map Function. Implemented with avatar.

import { List, ListItem } from 'react-native-purple'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

<List containerStyle={{marginBottom: 20}}>
  {
    list.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={{uri:l.avatar_url}}
        key={i}
        title={l.name}
      />
    ))
  }
</List>

Using Map Function. Implemented with link and icon.

import { List, ListItem } from 'react-native-purple'

const list = [
  {
    title: 'Appointments',
    icon: 'av-timer'
  },
  {
    title: 'Trips',
    icon: 'flight-takeoff'
  },
  ... // more items
]

<List>
  {
    list.map((item, i) => (
      <ListItem
        key={i}
        title={item.title}
        leftIcon={{name: item.icon}}
      />
    ))
  }
</List>

Using RN ListView. Implemented with link and avatar.

import { List, ListItem } from 'react-native-purple'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

renderRow (rowData, sectionID) {
  return (
    <ListItem
      roundAvatar
      key={sectionID}
      title={rowData.name}
      subtitle={rowData.subtitle}
      avatar={{uri:rowData.avatar_url}}
    />
  )
}

render () {
  return (
    <List>
      <ListView
        renderRow={this.renderRow}
        dataSource={this.state.dataSource}
      />
    </List>
  )
}

List Props

ListItem props