react-native-common-element

$3

$3

npm i -S react-native-common-element

$3

- 引入组件:

``
import { RNHeader } from 'react-native-common-element';

;
`

- 引入方法

import { screenUtil } from 'react-native-common-element';

$3


✅RNHeader - 页面头部

#### 使用方法
---
`
backgroundColor="#3673ee" // 背景色
leftComponent={{
text: '返回',
style: { color: '#fff' },
}} // 左侧组件
rightcomponent={}
centerComponent={{}} // 中间组件
leftContainerStyle={{}} // 左侧组件样式
centerContainerStyle={{}} // 中间组件样式
rightContainerStyle={{}} // 右侧组件样式
containerStyle={} // container style
barStyle={} // 状态栏样式
statusBarProps={} // 状态栏props
/>
`

✅RNLoading - Loading

✅RNModal - Modal

#### 使用方法
---
`
animationIn="" // 入场动画类型，default：'slideInUp'
animationOut="" // 消失动画类型，default：'slideOutDown'
animationInTiming={} // 入场动画持续时间，default：300
animationOutTiming={} // 消失动画持续时间，default：300
isVisible={} // modal隐藏与显示状态，bool, required,
backDropOpacity={} // modal遮罩透明度，default：0.7
backDropColor="" // modal遮罩颜色，default：'#000'
hasBackDrop={} // 是否需要遮罩，default：true
onBackDropPress={() => {}} // 点击遮罩回调函数
onModalWillHide={} // modal消失之前回调
onModalHide={} // modal消失后回调
onModalShow={} // modal显示后回调
onModalWillShow={} // modal显示之前回调
contentStyle={} // 内容style
useNativeDriver={} // 使用原生动画驱动，default: false
>
{/ children: modal内容，reuqired /}
{children}

`

✅RNDropDown - 下拉框

#### 使用方法
---
`
data={['我爱中国', '祖国万岁', '身体健康']} // 数据源，Required
pickVal="祖国万岁" // 默认选中值
containerStyle = {{}} // container样式
renderBase = {() => {}} // 自定义头部
pickerStyle={{
width: '100%',
backgroundColor: '#f1f1f1',
height: 32,
borderWidth: 1,
borderColor: '#979797',
borderRadius: 3,
}} // 头部container样式
pickTextStyle = {{}} // 头部文字样式
overlayStyle = {{}} // 下拉框container样式
itemContainerStyle = {{}} // option container样式
itemTextstyle = {{}} // option文本样式
itemActiveContainerStyle= {{}} // option 高亮container样式
itemActiveTextstyle= {{}} // option高亮文字样式
// 下拉选项option选择回调
handleChange = {(item, index) => { console.log(item, index); }}
/>
`

✅RNEchart - 图表组件

#### 使用方法
---
`
option={option} // option
width={375} // 宽度值
height={500} // 高度值
/>
`

✅RNCollapse - 折叠面板

#### 使用方法
---
`
isCollapse // 面板初始状态
iconText="我是组件" // 头部文字
collapseContainerStyle={styles.collapse} // 头部container style
iconStyle={styles.icon} // 头部icon style
iconTextStyle={styles.text} // 头部文字style
handlePress={() => {}} // 头部点击回调
>

折叠面板


`

✅RNPlaceHolder - 占位图

#### 使用方法
---
`
animation="fade" // 暂不支持定制化
isReady={false}
whenReadyRender={() => 加载完成}
>

color="pink" // 背景色
width={90} // 宽度 number
height={90} // 高度 number
style={{}} // 样式
borderRadius={45} // 圆角 number
noMargin // 是否有marginBottom
/>

noMargin // 是否有marginBottom
color="red" // 背景色
width="50%" // 宽度 number or string
textSize={12} // 基准大小
style={{}} // 样式
/>





`

✅RNPicker - 选择器

#### 使用方法
---
`
isVisible={this.state.isVisible} // 可见状态
toggleModal={(status) => { this.setState({ isVisible: status })}} // 切换可见状态函数
pickerData={['2017年', '2018年', '2019年', '2020年', '2021年']} // 数据源
selectedValue={this.state.selectedVal} // 选中项
selectConfirm={(selectedVal) => {
this.setState({
selectedVal,
})
}} // 点击头部确认函数
cancelBtnText="取消" // 取消按钮文字，默认“取消”
confirmBtnText="确认" // 确认按钮文字，默认“确认”
cancelBtnTextColor="" // 取消按钮文字颜色
confirmBtnTextColor="" // 确认按钮文字颜色
pickerFontColor="" // 选择项文字颜色
pickerFontSize="" // 选择项文字大小
/>
`

❌RNInput - Input

❌RNAngle - 三角形

❌RNToast - Toast

❌RNToTop - 返回头部

❌RNTreeSelect - 树型结构

❌RNButton - Button

❌RNCountDown - 倒计时组件




$3


✅ screenUtil - 尺寸适配

方法名|方法|参数
:-|:-:|:-:
字体缩放|setSpText|(size) => {}
大小缩放|scaleSize|(size, allowFontScaling) => {}


✅ isIphoneX - 判断是否是iphoneX系列

✅ screenW - 屏幕宽度

✅ screenH` - 屏幕高度