React Native 第三方库之 react-native-elements

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

官方文档

安装

//第一步
$ 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}/>

1. 效果图

    

   

   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>

1. 效果图

    

   

   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>
      
    );
  }
}

1. 效果图

    

   

   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>
      
    );
  }
}

1. 效果图

    

   

   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>

1. 效果图

    

   

   e11.jpg

作者：小飞象0304
链接：https://www.jianshu.com/p/3322a0999614
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。