React Native开发之常用第三方控件

前端之家收集整理的这篇文章主要介绍了React Native开发之常用第三方控件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有就是现在好多控件,如Android中已是系统的控件的sidemenu、checkBox、gridview等,这些在react native中 系统是没有给我们提供的,这时候就借助了第三方开源的力量。
那么我们今天说说在React Native项目开发中常见的一些第三方库。

常见的第三方库

组件篇

CheckBox(多选按钮)

react-native-check-Box CheckBox
基本用法

  1. <CheckBox
  2. style=
  3. onClick={()=>this.onClick(data)}
  4. isChecked={data.checked}
  5. leftText={leftText} />;

当然我们也可以自定义样式,主要是对选中和未选中的样式做修改

  1. renderCheckBox(data) {
  2. var leftText = data.name;
  3. return (
  4. <CheckBox
  5. style=
  6. onClick={()=>this.onClick(data)}
  7. isChecked={data.checked}
  8. leftText={leftText}
  9. checkedImage={<Image source={require('../../page/my/img/ic_check_Box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
  10. unCheckedImage={<Image source={require('../../page/my/img/ic_check_Box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
  11. />);
  12. }

RadioButton(单选按钮)

react-native-flexi-radio-button
使用也很简单,就是在中嵌套下就行:

  1. <RadioGroup onSelect = {(index,value) => this.onSelect(index,value)}
  2. >
  3. <RadioButton value={'item1'} >
  4. <Text>This is item #1</Text>
  5. </RadioButton>
  6.  
  7. <RadioButton value={'item2'}>
  8. <Text>This is item #2</Text>
  9. </RadioButton>
  10.  
  11. <RadioButton value={'item3'}>
  12. <Text>This is item #3</Text>
  13. </RadioButton>
  14. </RadioGroup>

sidemenu (侧滑栏)

react-native-side-menu
使用:

  1. <SideMenu menu={menu}>
  2. <ContentView/>
  3. </SideMenu>

猜你在找的React相关文章