哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!!

我们所要创建的是一个自定义的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 之 定义的组件 (跨文件使用)的更多相关文章

  1. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  2. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  3. 8、手把手教React Native实战之ReactJS组件生命周期

    1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...

  4. react native 的图表开源组件react-native-chart-android

    react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...

  5. React Native的SliderIOS滑块组件

    import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, SliderIOS, } fro ...

  6. [RN] React Native 删除第三方开源组件依赖包 后 还要做的 (以 删除 react-native-video为例)

    近期测试使用了下  react-native-video 使用一直不成功,后来想着删除掉, 使用命令: npm uninstall react-native-video 重新编译后,还是一直报错 后来 ...

  7. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  8. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

  9. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

随机推荐

  1. 图片预览-兼容IE

    直接贴代码吧: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. [py]access日志入mysql-通过flask前端展示

    目录 pymysql组装sql入库日志 代码组织 将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法 采集这些指标(metirc)都是linux环境,会用到 ...

  3. 随机模拟MCMC和Gibbs Sampling

    随机模拟 统计模拟中有一个重要的问题就是给定一个概率分布 p(x),我们如何在计算机中生成它的样本.一般而言均匀分布 Uniform(0,1)的样本是相对容易生成的. 通过线性同余发生器可以生成伪随机 ...

  4. 算法---数组总结篇2——找丢失的数,找最大最小,前k大,第k小的数

    一.如何找出数组中丢失的数 题目描述:给定一个由n-1个整数组成的未排序的数组序列,其原始都是1到n中的不同的整数,请写出一个寻找数组序列中缺失整数的线性时间算法 方法1:累加求和 时间复杂度是O(N ...

  5. 正态分布及3Sigma原理

    针对这个问题,用一两句话是难以说清楚的,这是数理统计学的内容,当质量特性呈正态分布时(实际上,当样本足够大时,二项分布.泊松分布等均趋近于正态分布),3Sigma水平代表了99.73%的合格率

  6. windows7下docker配置镜像加速

    原文地址:https://blog.csdn.net/slibra_L/article/details/77505003 1,本文目的:windows7下docker配置镜像加速,下面是具体操作步骤: ...

  7. linux命令:linux权限管理命令

    权限管理命令   文件的权限只有你两个人可以更改,一个是root,一个是文件所有者. 命令名称:chmod 命令英文原意:change the permissions mode of a  file ...

  8. Javascript--普通函数调用-涨工资计算函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  10. Python3 Selenium定位不到元素常见原因及解决办法

    Python3 Selenium定位不到元素常见原因及解决办法 一.问题描述 在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况: 报错信息: no such e ...