React Native 之 定义的组件 (跨文件使用)
哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间 哈哈 下面开始吧!!!!
我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、
图片资源、以及图片大小都是根据传过来的值确定的。(所传递进来的参数决定)
ok!!下面我们需要在MyButton.js 这个文件中添加一些原生的控件(组件)
import React, {
AppRegistry,
Component,
Image,
TouchableHighlight,
} from 'react-native';
然后就开始创建我们这个按钮组件啦!!!一般情况下我们会用一个叫TouchableHighlight 的这个组件去包裹里面的内容
class MyButton extends Component {
render() {
return (
<TouchableHighlight
underlayColor={this.props.bgColor}
activeOpacity={0.5}
onPress={this.props.onPress}
>
<Image
source={require('./res/himi.png')}
style={ {
width: this.props.imgWidth,
height: this.props.imgHeight
}}
/>
</TouchableHighlight>
)
}
}
其中:我们应该注意这个东东~ this.props 妹的~~这是什么鬼???
其实,这不是鬼~通俗的来说这个就是实例化的对象 比如说我创建了一个对象叫‘鬼’,那么 鬼=this.props ,所以鬼身上的属性也就是this.props的属性 (方法+属性)
那么,我这个this.props.xxx等属性就等待着实例化的“鬼来传递”,然后去操作其他的内容。。。。么么哒!!!
当然:
需要注意的:this.props.children 的值有三种可能:
a.如果当前组件没有子节点,它就是 undefined ;
b.如果有一个子节点,数据类型是 object ;
c.如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。
ok!组件创建好了以后~~我们就可以去将创建好的组件变形为一个能够传出去的组件
module.exports = MyButton;
ok!!上面的代码表示你这个组件可以被传出去了!~~~
注释:可以将许多的组件集中在一个组件上 然后传递出出来
大结局 :
下面我们就可以大胆的使用这个组件了,比如我们在另一个文件中使用这个组件:
<MyButton
bgColor='#000'
onPress ={()=>{Alert.alert('Himi', ' MyBtton IS Click! ');}}
imgWidth={100}
imgHeight={100}
>
</MyButton>
可以看出~这里将许多的属性参数全部传给了this.props,然后去执行一些操作!!!!!
注意:属性的名称一定要一样~要不然这个属性就找不到老祖宗了~~
React Native 之 定义的组件 (跨文件使用)的更多相关文章
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...
- 8、手把手教React Native实战之ReactJS组件生命周期
1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...
- react native 的图表开源组件react-native-chart-android
react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...
- React Native的SliderIOS滑块组件
import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, SliderIOS, } fro ...
- [RN] React Native 删除第三方开源组件依赖包 后 还要做的 (以 删除 react-native-video为例)
近期测试使用了下 react-native-video 使用一直不成功,后来想着删除掉, 使用命令: npm uninstall react-native-video 重新编译后,还是一直报错 后来 ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native常用第三方组件汇总--史上最全 之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
- React Native常用第三方组件汇总--史上最全[转]
本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...
随机推荐
- 梯度下降法实现-python[转载]
转自:https://www.jianshu.com/p/c7e642877b0e 梯度下降法,思想及代码解读. import numpy as np # Size of the points dat ...
- nodejs+express的(前端跨域请求)
1.后端代码 var dp = 456; var back = 'callback(\{\dp\ : \ ' + dp + '\ }\)'; res.send(back); 2.前端代码 <sc ...
- Python做接口自动化测试框架
框架结构如下: Test_Api_Project||---base.py|---base_api| |---register_api.py | |---send_sms_code_api.py|--- ...
- jmeter Bean Shell的使用(二)
BeanShell的用法 在此介绍下BeanShell PreProcessor的用法,其它的beahshell可以类推.在此我们使用beahshell调用自己写的工具类,工具类实现了密码的加.解密功 ...
- 定时器事件QtimerEvent 随机数 qrand Qtimer定时器
QTimerEvent类:定时器事件.QObject的子类都可使用 int QObject::startTimer(int interval)[参数:毫秒][返回值:定时器整型编号]来开启一个定时器 ...
- c#中ref和out使用及区别
在c#中,使用方法获得返回值时,只能获取一个返回值.当使用ref和out关键字后,可以获取多个返回值. MSDN对ref和out关键字的说明如下: ref 关键字: 使参数按引用传递.其效果是,当控制 ...
- SQLServer 重启服务后,自增1的标识列一次增长了1000(转自博问)
sql2012:我重启了下sql服务,然后自增列Id居然一下子跳了100,怎么回事啊?(之前的数据Id为1,我重启服务后,第二条数据Id就变成1001了),我自增是1,求大神帮忙啊 SQLServer ...
- 持续集成之四:Jenkins+sonarqube
参考其他文章,编译 构建 检查工具 参考:https://blog.csdn.net/lswnew/article/details/79193529 http://www.uml.org.cn/cod ...
- Spring 自动扫描 不支持jar包 <component-scan>
问题描述: 本机windows myeclipse10.7 运行非maven java项目,其中部分类使用spring3 注解进行注入,使用配置文件component-scan进行扫描,在本机debu ...
- PageRank算法与TextRank算法详解
PageRank算法: 该算法本质上属于有向带权图. 对于某个互联网网页A来说,该网页PageRank的计算基于以下两个基本假设: 数量假设:在Web图模型中,如果一个页面节点接收到的其他网页指向的入 ...