废话1：最近开启了RN的学习模式，又因为根本没怎么写过博客（作为一个正经准码农这怎么行！），所以决定现在开始一边学习RN一边写博客记录自己的进程及进步
废话2：在我踏入RN的路上非常感谢RN中文网，我踏入RN就是依仗它了，这篇博客的例子也是在学习了晴明老师的《如何制作一个按钮》后总结并自己琢磨到的一些知识点，也希望通过我分享出来能帮到一些朋友。
我们知道，在RN中有可以直接使用的控件（原谅我直接叫Component叫控件了吧，下同），比如使用按钮的话，有TouchableHighliht、TouchableNativeFeedback、TouchableOpacity这些可以直接导入使用。对于一个按钮来说，上面必须有代表着他的功能的文字，比如“确定”、“取消”。但是在RN中显示文本内容，又必须使用<Text></Text>来包裹文字，这就导致了使用TouchableOpacity的时候必须内部再嵌套一层<Text></Text>。也就是需要这样的代码：
<TouchableOpacity >
<Text> { "确认" } </Text>
</TouchableOpacity>
纯原生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);
长得还挺好看的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
哇和刚刚一样？？有没有搞错？？（同时原谅我无耻的其实用的截图都是同一张，不过别担心，实际效果也是这样的）
和刚刚一样就对了！以后需要使用控件的时候直接导入Button.js然后通过<Button></Button>（或者<Button/>）这样一下就有了一个按钮，是不是很方便呢？
写一个可复用的控件，并且在其他文件中引用，这一步已经完成了，那么想一下，不可能所有的按键都叫确定吧？不可能所有的按键颜色都是绿色，文本都是白色吧？……
这个时候你就需要看《ReactNative制作Component控件并且复用（二）》了！
网友评论