【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

简介:
本站文章均为  李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2219.html

在上一篇  【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件。

 那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数。

一:创建我们自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。

1.首先我们开始引入必要的一些组件

 

2. 创建我们的MyButton组件,继承 Component。

这里需要注意的就一个  this.props:

       在React中,组件的属性可以在组件类的 this.props 对象上获取。也就是说我们可以通过this.props对象上得到创建时传过来的属性。(注意属性名字要保持一致,才能正确获取到)

需要注意的:this.props.children 的值有三种可能:

a.如果当前组件没有子节点,它就是 undefined ;

b.如果有一个子节点,数据类型是 object ;

c.如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

3. 将我们写好的组件导入module中。

 

二:使用自定义的MyButton  

1. 导入我们的MyButton组件:

 

import X from ‘Y

X: 任意名字,用来代表我们导入的组件在此的临时组件名(可以与原组件名一致)

Y: 组件所在的相对路径

 

2.  在Render中使用:

bgColor: 传给MyButton的按下后的底色

onPress: 传给MyButton的触发函数(这里Himi偷懒用了lambda表达式)

imgWidth:传给MyButton中所用图片的宽

imgHeight:传给MyButton中所用图片的高

 

运行效果如下:(点击查看动态图)

user7


相关文章
|
21天前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
89 57
|
21天前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
80 57
|
21天前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
76 57
|
21天前
|
前端开发
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
81 56
|
14天前
|
移动开发 前端开发 JavaScript
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
78 30
|
11天前
|
编解码 前端开发 开发者
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
42 22
|
16天前
|
移动开发 前端开发 UED
React 音频音量控制组件 Audio Volume Control
在现代Web应用中,音频播放功能不可或缺。React以其声明式编程和组件化开发模式,非常适合构建复杂的音频音量控制组件。本文介绍了如何使用HTML5 `<audio>`元素与React结合,实现直观的音量控制系统,并解决了常见问题如音量范围不合理、初始音量设置及性能优化等,帮助开发者打造优秀的音频播放器。
64 27
|
12天前
|
Web App开发 移动开发 前端开发
React 视频播放器样式自定义实战指南
本文详细介绍了如何在React项目中实现视频播放器的样式自定义,涵盖HTML5 `<video>`标签的基础知识、CSS样式定制技巧及常见问题解决方案。针对全屏模式样式失效、移动端触摸事件冲突和进度条样式定制等问题提供了具体代码示例。同时,探讨了视频预加载策略和内存优化方法,并推荐了几款调试工具,帮助开发者提升用户体验和应用性能。
40 6
|
13天前
|
Web App开发 移动开发 前端开发
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生<audio>标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
58 12
|
18天前
|
移动开发 前端开发 开发者
React 音频播放控制组件 Audio Controls
本文介绍了如何使用React构建音频播放控制组件,涵盖HTML5 `<audio>`标签和React组件化思想的基础知识。针对常见问题如播放状态管理、进度条更新不准确及跨浏览器兼容性,提供了详细的解决方案和代码示例。同时,还总结了易错点及避免方法,如确保音频加载完成再操作、处理音频错误等,帮助开发者实现稳定且功能强大的音频播放器。
48 11