前言
React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有就是现在好多控件,如Android中已是系统的控件的sidemenu、checkBox、gridview等,这些在react native中 系统是没有给我们提供的,这时候就借助了第三方开源的力量。
那么我们今天说说在React Native项目开发中常见的一些第三方库。
常见的第三方库
组件篇
CheckBox(多选按钮)
react-native-check-Box CheckBox
基本用法:
<CheckBox
style=
onClick={()=>this.onClick(data)}
isChecked={data.checked}
leftText={leftText} />;
当然我们也可以自定义样式,主要是对选中和未选中的样式做修改:
renderCheckBox(data) {
var leftText = data.name;
return (
<CheckBox
style=
onClick={()=>this.onClick(data)}
isChecked={data.checked}
leftText={leftText}
checkedImage={<Image source={require('../../page/my/img/ic_check_Box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
unCheckedImage={<Image source={require('../../page/my/img/ic_check_Box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/>}
/>);
}
RadioButton(单选按钮)
react-native-flexi-radio-button
使用也很简单,就是在中嵌套下就行:
<RadioGroup onSelect = {(index,value) => this.onSelect(index,value)}
>
<RadioButton value={'item1'} >
<Text>This is item #1</Text>
</RadioButton>
<RadioButton value={'item2'}>
<Text>This is item #2</Text>
</RadioButton>
<RadioButton value={'item3'}>
<Text>This is item #3</Text>
</RadioButton>
</RadioGroup>
sidemenu (侧滑栏)
react-native-side-menu
使用:
<SideMenu menu={menu}>
<ContentView/>
</SideMenu>