react native万能公用组件

项目中总是会用到很多公共的组件,样式就跟设置里面的单个item很像,本项目就是打造一个公共的万能组件 项目中有两个文件,一个是公用组件,一个是字体大小适配

你可以自定义各种组件哦!


具体代码请参考:https://github.com/LiuC520/react-native-public-component



react native万能公用组件
使用说明

npm install --save react-native-public-component

项目中引入:

import {PublicCompoennt, dimens} from 'react-native-public-component'

如果要使用字体适配和宽高等信息,可以导入dimens

参数说明:




props 说明 备注

containerStyle 整个容器的样式,可以设置padding、margin、背景颜色等等

leftComponent 自定义左侧组件

centerContent 自定义中间组件

rightComponent 自定义右侧组件

leftComponentStyle 自定义左侧组件样式

centerContentStyle 自定义中间组件样式

rightComponentStyle 自定义右侧组件样式

leftIcon 左侧图标

leftIconStyle 左侧图标样式

rightIcon 右侧图标

rightIconStyle 右侧图标样式

rightArrow 右侧箭头

rightArrowStyle 右侧箭头样式

isRightArrowShow 是否显示右侧箭头 默认显示 true

leftText 左侧文字 可以为字符串或者Text组件

leftTextStyle 左侧文字样式

centerText 中间文字 可以为字符串或者Text组件

centerTextStyle 中间文字样式

rightText 右侧文字 可以为字符串或者Text组件

rightTextStyle 右侧文字样式

onPress 整个item的点击事件 方法

onLeftPress 左侧点击事件 方法

onRightPress 右侧点击事件 方法

onCenterPress 中间点击事件 方法

hiddenLeft 隐藏左侧 bool,默认为false

hiddenRight 隐藏右侧 bool,默认为false

removeLeftView 移除左侧 bool,默认为false

removeCenterView 移除中间 bool,默认为false

removeRightView 移除�右侧 bool,默认为false

hiddenTopLine 隐藏上划线 默认为�true

topLineStyle 上划线样式

topLineLeftMargin 上划线左边距 数字

topLineRightMargin 上划线右边距 数字

hiddenBottomLine 隐藏下划线 默认为false

bottomLineStyle 下划线样式

bottomLineLeftMargin 下划线左边距 数字,默认左边距为15

bottomLineRightMargin 下划线右边距 数字

具体的使用方法请参考示例 https://github.com/LiuC520/react-native-public-component/blob/master/example/App.js

上面的样式或者icon为number表示常量,图标为require导入的,如果uri导入表示对象,具体参考示例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native中可以使用Image组件和ImageEditor组件来实现页面组件的黑白滤镜效果。以下是实现步骤: 1. 导入Image和ImageEditor组件: ```javascript import { Image, ImageEditor } from 'react-native'; ``` 2. 在组件中使用Image组件来渲染需要添加黑白滤镜的组件,并添加样式: ```javascript <Image source={require('./assets/image.jpg')} style={styles.image} /> ``` 其中,require('./assets/image.jpg')指定了需要添加黑白滤镜的组件的路径,styles.image定义了Image组件的样式: ```javascript const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); ``` 3. 使用ImageEditor组件组件进行黑白滤镜处理: ```javascript ImageEditor.cropImage(uri, { offset: { x: 0, y: 0 }, size: { width: screenWidth, height: screenHeight }, displaySize: { width: screenWidth, height: screenHeight }, resizeMode: 'contain', }, (croppedImageURI) => { ImageEditor.processImage(croppedImageURI, { width: screenWidth, height: screenHeight, resizeMode: 'contain', colorMatrix: [ 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0, 0, 0, 1, 0 ], }, (processedImageURI) => { this.setState({ processedImageURI }); }, (error) => console.error(error)); }, (error) => console.error(error)); ``` 其中,uri参数指定了需要添加黑白滤镜的组件的路径,colorMatrix参数指定了黑白滤镜的矩阵。处理完成后,将处理后的图片设置为组件的state,并在render方法中使用Image组件来渲染处理后的图片: ```javascript render() { return ( <View style={styles.container}> <Image source={{ uri: this.state.processedImageURI }} style={styles.image} /> // 其他组件 </View> ); } ``` 注意,ImageEditor组件是异步执行的,因此需要使用回调函数来处理处理后的图片。详细使用方法可以查看React Native官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值