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

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

前言

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>
@H_502_157@ 原文链接:https://www.f2er.com/react/305113.html

猜你在找的React相关文章