React Native 第三方库之 react-native-

官方文档

安装

//第一步
$ npm install --save react-native-elements
//第二步
$ npm install react-native-vector-icons --save
//第三步
$ react-native link

组件

Avatar

1. 用法

import { Avatar } from 'react-native-elements';

<Avatar
  size="large"
  rounded
  source = {require('./img/a.jpg')}
  onPress={() => { }}
  activeOpacity={0.7}/>

2. 效果图

   
   e6.jpg

Badge

1. 用法

import { Badge } from 'react-native-elements';

<View style={styles.container}>
   <Badge status='success' value="1" />
   <Badge status='error' value="2" />
   <Badge status='primary' value="3" />
   <Badge status='warning' value="4" />       
</View>

2. 效果图

   
   e5.jpg

ButtonGroup

1. 用法

import { ButtonGroup } from 'react-native-elements';

export default class App extends Component {
  constructor(props) { 
    super(props);
    this.state = {
      selectedIndex:1
    }
    this.updateIndex = this.updateIndex.bind(this);
  }
  updateIndex(selectedIndex) {
    this.setState({ selectedIndex })
  }
  render() {
    const buttons = ['iOS', 'Android', 'Java']
    const { selectedIndex } = this.state
    return (
      <View >
        <ButtonGroup
          onPress={this.updateIndex}
          selectedIndex={selectedIndex}
          buttons={buttons}
          containerStyle={{ height: 48 }}
        />      
      </View>
      
    );
  }
}

2. 效果图

   
   e7.jpg

Card

1.用法

import {
  Card,
  Button
} from 'react-native-elements';
export default class App extends Component {
  
  render() {
    return (
      <View style={styles.container}>
        <Card
          title='HELLO WORLD'
          image={require('./img/a.jpg')}>
          <Text style={{ marginBottom: 10 }}>
            The idea with React Native Elements is more about component structure than actual design.
          </Text>
          <Button
            icon={<Icon name='code' color='#ffffff' />}
            backgroundColor='#03A9F4'
            buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
            title='VIEW NOW' />
        </Card>      
      </View>
      
    );
  }
}

2. 效果图

   
   e8.jpg

CheckBox

1.用法

import { CheckBox } from 'react-native-elements';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked:false
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <CheckBox
          center
          title='Click Here'
          checkedIcon='dot-circle-o'
          uncheckedIcon='circle-o'
          checked={this.state.checked}
          onPress={() => this.setState({checked: !this.state.checked})}
        />
      </View>
      
    );
  }
}

2.效果图

e9.jpg

Divider

1.用法

import { Divider } from 'react-native-elements';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Divider style={styles.divider}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection: 'column',
  },
  divider: {
    marginTop:20,
    height:1,
    backgroundColor:'blue'
  }
});

2.效果图

e10.jpg

Header

1. 用法

import { Header } from 'react-native-elements';

<View >
  <Header
    leftComponent={{ icon: 'menu', color: '#fff' }}
    centerComponent={{ text: '首页', style: { color: '#fff' } }}
    rightComponent={{ icon: 'home', color: '#fff' }}/>
</View>

2. 效果图

   
   e11.jpg