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，然后去執行一些操作！！！！！

注意：屬性的名稱一定要一樣~要不然這個屬性就找不到老祖宗了~~