廢話1：最近開啟了RN的學習模式，又因為根本沒怎么寫過博客（作為一個正經準碼農這怎么行！），所以決定現在開始一邊學習RN一邊寫博客記錄自己的進程及進步
廢話2：在我踏入RN的路上非常感謝RN中文網，我踏入RN就是依仗它了，這篇博客的例子也是在學習了晴明老師的《如何制作一個按鈕》后總結并自己琢磨到的一些知識點，也希望通過我分享出來能幫到一些朋友。
我們知道，在RN中有可以直接使用的控件（原諒我直接叫Component叫控件了吧，下同），比如使用按鈕的話，有TouchableHighliht、TouchableNativeFeedback、TouchableOpacity這些可以直接導入使用。對于一個按鈕來說，上面必須有代表著他的功能的文字，比如“確定”、“取消”。但是在RN中顯示文本內容，又必須使用<Text></Text>來包裹文字，這就導致了使用TouchableOpacity的時候必須內部再嵌套一層<Text></Text>。也就是需要這樣的代碼：
<TouchableOpacity >
<Text> { "確認" } </Text>
</TouchableOpacity>
what？？沒有任何樣式，甚至都看不清點擊按鈕的反饋？？！
那先加上樣式把他做的稍微像一個按鈕再說吧：【index.andoid.js】
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
export default class button extends Component {
render() {
return (
<View style = { styles.container }>
<TouchableOpacity style = { styles.button }>
<Text style = { styles.btText }> { "確認" } </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
height: 30,
width: 200,
backgroundColor: '#0f0',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
btText: {
color: '#fff',
fontSize: 16,
},
});
AppRegistry.registerComponent('button', () => button);
好的，算是不錯，長得像一個按鈕了！
那么這個時候不禁會想：難道我每寫一個按鈕都要把這套代碼搞上去嗎？有一丟丟小麻煩呀！可不可以和Android原生一樣直接用一個Button，然后設置文本和樣式呢？
當然了，我寫這個博客的意義就來了！復用Button減少重復代碼
- 在項目目錄下新建一個Button.js文件（比如在index.android.js同級目錄下新建一個文件夾component，我的項目名為button，所以路徑在：button/component/Button.js）。
- 在Button.js文件中寫按鈕，就是剛剛那串代碼了==>>沒錯，直接copy過去就行了！
但是，但是，but：index.android.js是入口文件，而Button.js只是一個在需要的時候才導入使用的文件，所以還是有一些區別的！
【Button.js】：
import React, { Component } from 'react';
import {
// AppRegistry,-----Button.js不是入口文件，不需要
StyleSheet,
Text,
// View,-----沒有用到，干掉
TouchableOpacity,
} from 'react-native';
// 這里特別注意 export default 關鍵字，只有加上關鍵字才能在其他文件引用本文件
// 注意class Button 是大寫，與Button.js保持一致
export default class Button extends Component {
render() {
return (
// 這層View只是在剛剛調整button的位置需要用到，單獨一個button不需要考慮位置（由使用button的區域考慮），干掉
// <View style = { styles.container }>
<TouchableOpacity style = { styles.button }>
<Text style = { styles.btText }> { "確認" } </Text>
</TouchableOpacity>
// </View>
);
}
}
const styles = StyleSheet.create({
// 上面被干掉的View的樣式，View被干掉了，這個樣式當然也需要被干掉！
// container: {
// flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
// },
button: {
height: 30,
width: 200,
backgroundColor: '#0f0',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
btText: {
color: '#fff',
fontSize: 16,
},
});
// 不是APP入口文件！干掉干掉
// AppRegistry.registerComponent('button', () => button);
到現在為止就寫好了第一個可引入使用的控件，不信嗎？那現在切換回【index.android.js】，我們來使用一下！
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
} from 'react-native';
// 注意了！！就是這句話把剛剛寫的Button.js引入使用！
// 導入 Button 從 './component/Button'（Buton.js文件的路徑）
// ----最后Button不需要寫成Button.js
import Button from './component/Button';
export default class button extends Component {
render() {
return (
<View style = { styles.container }>
{/*通過import引入了Button控件后，就可以像下面這樣直接使用這個控件，或者你寫成自閉和也行<Button/>*/}
<Button>
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
AppRegistry.registerComponent('button', () => button);
這個時候再double R：
哇和剛剛一樣？？有沒有搞錯？？（同時原諒我無恥的其實用的截圖都是同一張，不過別擔心，實際效果也是這樣的）
和剛剛一樣就對了！以后需要使用控件的時候直接導入Button.js然后通過<Button></Button>（或者<Button/>）這樣一下就有了一個按鈕，是不是很方便呢？
寫一個可復用的控件，并且在其他文件中引用，這一步已經完成了，那么想一下，不可能所有的按鍵都叫確定吧？不可能所有的按鍵顏色都是綠色，文本都是白色吧？……
這個時候你就需要看《ReactNative制作Component控件并且復用（二）》了！
