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

Author Avatar
LiuZh 2月 27, 2017

废话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减少重复代码

  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.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控件并且复用（二）》了！

expand_less