React Native 自定义组件

最新推荐文章于 2024-04-27 01:47:25 发布
最新推荐文章于 2024-04-27 01:47:25 发布
阅读量527 收藏
点赞数 1
文章标签： android

React Native 自定义组件

96 塔米尔 关注

2017.04.02 01:04* 字数 181 阅读 872评论 3喜欢 7

ES6语法

定义组件
在ES6里，我们通过定义一个继承自React.Component的class来定义一个组件类，像这样：

 

定义组件的属性类型和默认属性

在ES6里，可以统一使用static成员来实现

 

正文

首先

 

必须包含PropTypes，这是为了规范组件属性的数据类型

 

设置默认属性

 

设置对外接收的属性，以及属性的数据类型

 

上面的block属性我设置的是一个func类型，也就是函数，在这里就是起一个回调作用。

 

外部使用

引入自定义组件文件

 

自定义组件完整代码

 

<div align='center'>

 

效果图

外部调用

 

小礼物走一走，来简书关注我

赞赏支持

 日记本

© 著作权归作者所有

举报文章

96关注塔米尔 

写了 7490 字，被 5 人关注，获得了 24 个喜欢

喜欢

 

7

   更多分享

Web note ad 1

登录 后发表评论

3条评论 只看作者

按时间倒序按时间正序

 爱哭的笨小孩

3楼 · 2017.09.23 20:30

Note: React.PropTypes is deprecated as of React v15.5. Please use the prop-types library instead.

赞  回复

 

塔米尔：

 不知道你解决这个警告美有，如果没有你可以看看React的官方日志，按他的使用方法来
https://reactjs.org/blog/2017/04/07/react-v15.5.0.html

 

2017.11.09 14:46  回复

 添加新评论

 塔米尔 作者

2楼 · 2017.04.02 01:06

给自己点赞

转自: 

https://www.jianshu.com/p/095a780d6bdc?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

凌波微步1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React自定义组件实例
kepus的博客
06-28 3200
1. 组件简介 组件描述：共有日历、日期、时间3个组件，日历为父组件，由日期和时间2个组件组成。 功能描述： &amp;amp;amp;nbsp;1.打开页面开始每秒计数 &amp;amp;amp;nbsp;2. 可以开始、停止计数 &amp;amp;amp;nbsp;3. 日期组件可以显示、隐藏（默认显示，双击日期显示隐藏） 原理描述： &amp;amp;amp;nbsp;1.组件的state变化会导致组件重新渲染（执行render函
react创建自定义组件_如何在React中创建自定义组件
08-16 2928
react创建自定义组件The author selected Creative Commons to receive a donation as part of the Write for DOnations program. 作者选择了创用CC来接受捐赠，这是Write for DOnations计划的一部分。 介绍 (Introduction) In this tutorial, y...
【React】定义组件的两种方式
z914020826的博客
03-04 874
一、函数式组件定义一个组件最简单的方法就是写一个JavaScript函数//1.创建函数式组件 function MyComponent() {//此处的this是undefined，因为babel编译后开启了严格模式 return < h2 > 我是用函数定义的组件(适用于【简单组件】的定义) < / h2 > } //2.渲染组件到页面 ReactDOM . render(< MyComponent / > , document . getElementById('test'))
【iOS开发】(三)react Native核心组件十个20240418
qq_53433382的博客
04-19 1207
RN 中的核心组件，是对原生组件的封装原生组件: Android或ios内的组件核心组件:RN中最常用的，来在 react-native 的组件开发 React Native 应用程序时，通常会使用以下核心组件：View（视图）：View 是 React Native 中最基本的组件之一，用于创建布局结构。它类似于 web 开发中的元素，用于包裹和组织其他组件。Text（文本）：Text 组件用于显示文本内容，类似于 HTML 中的或元素。
ReactNative进阶（四十七）：自定义组件_react native组件开发
最新发布
2401_84434880的博客
04-27 388
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于。
react入门 笔记 -- 自定义组件
初郁
03-11 240
1.2自定义组件（Component） 方式1：工厂函数组件（简单组件） <script type="text/babel"> // 1.定义组件 // 方式1：工厂函数组件（简单组件） function MyComponent() { return <h2>方式1：工厂函数组件（简单组件）</h2> } ...
React Native自定义组件与输出方法详解
01-20
如果你看的这一篇,需要你对ReactNative的开发有一定的了解,此文讲的是在ReactNative提供的组件不能满足需求,或者native用于较成熟的组件想要输出,那么就需要用到自定义组件了. 通过该文,我们也可以对native和JS交互...
React Native自定义标题栏组件的实现方法
01-20
大家好，今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。 标题栏是大多数应用界面必不可少的一...
React Native 自定义字体图标
02-23
5. 创建一个自定义组件，用于渲染字体图标。这通常涉及使用`Text`组件并设置`style`属性以应用字体和图标代码： ```javascript import React from 'react'; import { Text } from 'react-native'; const Icon = ({ ...
react-native 自定义容器组件-this.props.children
文化园
06-02 2871
自定义容器组件也是我一直想要实现的，就像<View></View>一样，其中可以放置很多的View组件，来实现我们想要的UI效果；然而这种容器组件可以通过 this.props.children 来实现
React-Native系列Android自定义原生UI组件
水滴穿石
09-17 9815
由于官方的Android原生UI组件解释的并不是很完整，根据个人的不断摸索，终于成功完成原生组件的制作，所以写下这篇文章作为记录，也给让小白们少走些弯路。我这里通过讲解制作一个绘圆组件的流程，来学习制作android原生UI组件。这个绘圆组件并没有实际的使用价值，只是为了更容易的了解android原生UI组件的制作过程。好了废话不多说，现在开始吧。首先初始化react-native项目，最好能弄个V
react-native-slider-intro:一个简单且可完全自定义的React Native组件，为您的应用实现了一个简介滑块
05-08
:mobile_phone_with_arrow: react-native-slider-intro 一个简单且可完全自定义的React Native组件，为您的应用实现了简介滑块。 该软件包已作为PC控制器react-native应用程序的子模块编写。 安装 npm install react-native-slider-intro --save 运行示例项目 cd example && npm run example 用法 基本例子 制作自己的数据数组，并将其传递给SliderIntro 。 import React from 'react' ; import SliderIntro from 'react-native-slider-intro' ; const slides = [ { index : 1 , title : 'First step' , text : 'Simple des
react-native-components:自定义可重用组件以响应本机
05-05
自定义React Native组件 一个高度可扩展的，黄油平滑的可重用组件，用于react-native初始项目的react native兼容。 由创建并维护 :red_heart: 由 React本机组件 使用lerna管理的React Native Components monorepo，可作为npm打包库使用。 脚手架 React性的 感谢这些优秀的人（ :smiling_face_with_smiling_eyes: ）： 索菲·奥甘多（Sophie Ogando） :laptop: 贾斯汀·泽维尔（Justin K Xavier） :laptop: :thinking_face: :metro: 塔拉斯·萨莫伊连科（Taras Samoilenko） :laptop: 拉吉什里·辛格·巴格尔（Rajshri Singh Baghel） :laptop: 该项目遵循所有参与者的规范。 欢迎任何形式的捐助！ :smiling_face_with_smiling_eyes: 拉取接受的请求 :red_heart:
React 创建自定义控件
08-11
一个简单的React使用示例，使用React创建自定义控件
ReactNative For Android 之四：自定义组件
依生依世
08-01 401
ReactNative For Android 之四：自定义组件一.自定义View二.添加到自定义package三.JS中调用四.native事件的处理 ReactNative已经包含很多常用控件，并在持续更新，但仍然不可能包含全部控件，比如很多第三方的已经我们自定义的控件，不过提供了方法让我们将想使用的控件包装到RN里，就可以在js中使用了，android里常用的Button RN没有包含(有别...
react-native自定义原生组件
weixin_34296641的博客
10-18 248
此文已由作者王翔授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。使用react-native的时候能够看到不少函数调用式的组件，像LinkIOS用来呼起url请求 LinkIOS.openUrl('http://www.163.com');actionSheetIOS用来实现ios客户端底部弹起的选择对话框ActionSheetIOS.showActionSheetWithO...
react 自定义组件
一起学习前端知识，一起成为前端开发工程师！
03-09 339
在开发中，难免遇见antdesign中不存在的组件，所以需要我们自己自定义。
完全征服React Native
08-22
React Native是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOS App，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。本课程采用新的ES6开发，主要内容包括ReactNative的基础知识，ReactNative的布局，组件，API，封装本地API和组件，发布ReactNative App，本地与ReactNative深度结合
React Native自定义Button
星宇大前端
08-21 1291
效果： 引用文件代码： import React, { Component } from 'react'; import { AppRegistry, Image, Text, View, StyleSheet, } from 'react-native'; var ZYButton = require('./ZYButt
react native自定义控件
03-28
React Native中的自定义控件使用与React相同的组件方式进行实现。以下是自定义控件的基本步骤： 1. 创建一个自定义控件组件：在你的项目中创建一个新的组件，该组件包含你自定义的UI元素。 2. 定义控件属性：你可以在组件的props中定义一些属性，这些属性可以用来设置控件的外观和行为。 3. 实现控件逻辑：在组件的render方法中实现控件的逻辑，包括控件的事件处理、状态管理等。 4. 导出控件：将你的自定义控件组件导出，以便其他组件可以使用它。 以下是一个简单的例子，演示如何创建自定义控件： ``` import React, { Component } from 'react'; import { Text, TouchableOpacity } from 'react-native'; class CustomButton extends Component { constructor(props) { super(props); this.state = { pressed: false, }; } handlePress = () => { this.setState({ pressed: true }); }; handleRelease = () => { this.setState({ pressed: false }); }; render() { const { title, disabled } = this.props; const { pressed } = this.state; const buttonStyle = [ styles.button, disabled && styles.disabled, pressed && styles.pressed, ]; return ( <TouchableOpacity style={buttonStyle} onPress={this.handlePress} onPressOut={this.handleRelease} activeOpacity={0.6} disabled={disabled} > <Text style={styles.text}>{title}</Text> </TouchableOpacity> ); } } const styles = { button: { backgroundColor: '#007aff', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 5, }, disabled: { opacity: 0.5, }, pressed: { backgroundColor: '#0051a8', }, text: { color: '#fff', fontSize: 16, fontWeight: 'bold', textAlign: 'center', }, }; export default CustomButton; ``` 在上面的例子中，我们创建了一个CustomButton组件，它包含一个TouchableOpacity，以及一些属性和状态来控制按钮的外观和行为。在render方法中，我们使用了一些简单的样式来设置按钮的外观，以及一些事件处理来处理按钮的行为。最后，我们将CustomButton组件导出，以便其他组件可以使用它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值