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 之 定義的組件 （跨檔案使用）