React Native -20.React Native 自定义组件(跨文件，类似创建一

发布时间：2020-12-15 08:25:01 所属栏目：百科来源：网络整理

导读：哈哈的~~~今天介绍的是自定义组件然后去使用这个组件，让这个组件传递这各种文件之间哈哈下面开始吧！！！！我们所要创建的是一个自定义的Button，先创建一个js文件起名为MyButton,且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据

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

我们所要创建的是一个自定义的Button，先创建一个js文件起名为MyButton,且触摸后的底色、触发事件响应的函数、

图片资源、以及图片大小都是根据传过来的值确定的。（所传递进来的参数决定）

ok！！下面我们需要在MyButton.js 这个文件中添加一些原生的控件（组件）

 
         import 
         React,{ 
        
         AppRegistry, 
        
         Component, 
        
         Image, 
        
TouchableHighlight, 
        
         } from 
         'react-native' 
         ;

　　然后就开始创建我们这个按钮组件啦！！！一般情况下我们会用一个叫TouchableHighlight的这个组件去包裹里面的内容

 
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
      class 
         MyButtonextendsComponent { 
         render() { 
        
         return 
         ( 
        
         <TouchableHighlight 
        
underlayColor={ 
         this 
         .props.bgColor} 
        
         activeOpacity={0.5} 
        
onPress={ 
         .props.onPress} 
        
         > 
        
         <Image 
        
source={require( 
         './res/himi.png' 
         )} 
        
         style={ { 
        
width: 
         .props.imgWidth, 
        
         height: 
         .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！组件创建好了以后~~我们就可以去将创建好的组件变形为一个能够传出去的组件

 
         1 
         
         module.exports = MyButton;

　　ok！！上面的代码表示你这个组件可以被传出去了！~~~

注释：可以将许多的组件集中在一个组件上然后传递出出来

大结局：

下面我们就可以大胆的使用这个组件了，比如我们在另一个文件中使用这个组件：

 
         7 
         
      <MyButton 
         
         bgColor= 
         '#000' 
        
onPress ={()=>{Alert.alert( 
         'Himi' 
         , 
         ' MyBtton IS Click! ' 
         );}} 
        
         imgWidth={100} 
        
imgHeight={100} 
        
         > 
        
</MyButton>

　　可以看出~这里将许多的属性参数全部传给了this.props，然后去执行一些操作！！！！！

注意：属性的名称一定要一样~要不然这个属性就找不到老祖宗了~~

转载自：http://www.cnblogs.com/allenxieyusheng/p/5781144.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!