ReactNative制作Component控件并且复用（一）

废话1：最近开启了RN的学习模式，又因为根本没怎么写过博客（作为一个正经准码农这怎么行！），所以决定现在开始一边学习RN一边写博客记录自己的进程及进步

废话2：在我踏入RN的路上非常感谢RN中文网，我踏入RN就是依仗它了，这篇博客的例子也是在学习了晴明老师的《如何制作一个按钮》后总结并自己琢磨到的一些知识点，也希望通过我分享出来能帮到一些朋友。

我们知道，在RN中有可以直接使用的控件（原谅我直接叫Component叫控件了吧，下同），比如使用按钮的话，有TouchableHighliht、TouchableNativeFeedback、TouchableOpacity这些可以直接导入使用。对于一个按钮来说，上面必须有代表着他的功能的文字，比如“确定”、“取消”。但是在RN中显示文本内容，又必须使用<Text></Text>来包裹文字，这就导致了使用TouchableOpacity的时候必须内部再嵌套一层<Text></Text>。也就是需要这样的代码：

export default class button extends Component {  render() {    return (        <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减少重复代码

1.在项目目录下新建一个Button.js文件（比如在index.android.js同级目录下新建一个文件夹component，我的项目名为button，所以路径在：button/component/Button.js）。

2.在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.jsimport Button from './component/Button';export default class button extends Component {  render() {    return (      <View style = { styles.container }>       {/*通过import引入了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>这样一下就有了一个按钮，是不是很方便呢？

写一个可复用的控件，并且在其他文件中引用，这一步已经完成了，那么想一下，不可能所有的按键都叫确定吧？不可能所有的按键颜色都是绿色，文本都是白色吧？……

这个时候就需要通过props来传递数据了

期待一下《ReactNative制作Component控件并且复用（二）》吧。嘻嘻