|
|
51CTO旗下网站
|
|
移动端

2.1 不要重复你自己:实现自定义组件

《React Native Cookbook(中文版)》第2章熟悉 React Native 生态,本章带你了解如何导入组件、如何编写组件,以及如何使用 JavaScript 库来构建复杂的React 应用。本节为大家介绍不要重复你自己:实现自定义组件。

作者:刘清/文一山 译来源:电子工业出版社|2018-09-23 17:48

第2章 熟悉 React Native 生态

React 应用中最小的逻辑单位是组件:一种会把输入转换为一组基于一系列参数渲染的嵌套视图的函数。React 生态里面到处都有组件的身影,我们经常会从外部库文件导入它们。

本章带你了解如何导入组件、如何编写组件,以及如何使用 JavaScript 库来构建复杂的React 应用。

2.1 不要重复你自己:实现自定义组件

组件只做一件事情,由这样的组件构成的React 应用会比较容易组合,也容易组织和维护。

问题

你的应用在每个页面上都有一个<Header /> 组件。在数十个页面中,该如何避免在每次添加新页面的时候,都要写相似的代码?

解决方案

通过实现 <ScreenHeader /> 组件减少代码重复。

这个实例中,我使用 react-native-elements 组件库来渲染 <Header /> 组件。查看2.3节的示例可以了解如何导入一个自定义组件。

全局样式

你可能注意到这个示例中引用了colors 和 globalStyles。它们是在文件头部从外部文件导入的:import { colors, globalStyels } from '../styles';。查看第 3 章可以了解关于全局颜色和样式的更多细节。

在Home 页面的 render() 函数中有下面的JSX 语句:

  1. <View style={globalStyles.headerContainer}> 
  2. <Header 
  3. leftComponent={  
  4. <Button 
  5. icon={{ name: 'arrow-back' }}  
  6. buttonStyle={{  
  7. backgroundColor: null,  
  8. padding: 0,  
  9. }}  
  10. title='' 
  11. color={colors.WHITE}  
  12. onPress={this.backPressed}  
  13. />}  
  14. centerComponent={  
  15. <Text 
  16. style={globalStyles.siteHeaderText}  
  17. >{this.props.data.me.first_name}</Text> 
  18. }  
  19. rightComponent={  
  20. <Button 
  21. icon={{ name: 'home' }}  
  22. buttonStyle={{  
  23. backgroundColor: null,  
  24. padding: 0,  
  25. }}  
  26. title='' 
  27. color={colors.WHITE}  
  28. onPress={this.goHome}  
  29. />}  
  30. /> 
  31. </View> 

在Course 页面中,代码与上面的类似:

  1. <View style={globalStyles.headerContainer}> 
  2. <Header 
  3. leftComponent={  
  4. <Button 
  5. icon={{name: 'arrow-back'}}  
  6. buttonStyle={{  
  7. backgroundColor: null,  
  8. padding: 0,  
  9. }}  
  10. title='' 
  11. color={colors.WHITE}  
  12. onPress={this.back}  
  13. />}  
  14. centerComponent={  
  15. <Text 
  16. style={globalStyles.siteHeaderText}  
  17. >{this.course().name}</Text> 
  18. }  
  19. rightComponent={  
  20. <Button 
  21. icon={{name: 'settings'}}  
  22. buttonStyle={{  
  23. backgroundColor: null,  
  24. padding: 0,  
  25. }}  
  26. title='' 
  27. color={colors.WHITE}  
  28. onPress={this.goHome}  
  29. />}  
  30. /> 
  31. </View> 

可以看到很多相似的逻辑,特别是每一个页面的<Header /> 都有一些不同的地方。理想情况下,我们可以引用一个强调差异性并隐藏复杂性的组件:

  1. <ScreenHeader 
  2. leftComponentIcon='arrow-back' 
  3. leftOnPress={this.back}  
  4. centerText={this.course().name}  
  5. rightIcon='settings' 
  6. rightOnPress{this.goHome}  
  7. /> 

在项目的components 文件夹里创建一个新文件——components/screenHeader.js :

  1. import React, { Component } from 'react';  
  2. import {  
  3. Text,  
  4. View  
  5. } from 'react-native';  
  6. import {  
  7. Button,  
  8. Header  
  9. } from 'react-native-elements';  
  10. import { colors, globalStyles } from '../styles';  
  11. import PropTypes from 'prop-types';  
  12. class ScreenHeader extends Component {  
  13. render() {  
  14. return <View style={globalStyles.headerContainer}> 
  15. <Header 
  16. leftComponent={  
  17. <Button 
  18. icon={{ name: this.props.leftIcon }}  
  19. buttonStyle={{  
  20. backgroundColor: null,  
  21. padding: 0,  
  22. }}  
  23. title='' 
  24. color={colors.WHITE}  
  25. onPress={this.props.leftOnPress}  
  26. /> 
  27. }  
  28. centerComponent={  
  29. <Text style={globalStyles.siteHeaderText}>{this.props.centerText}</Text> 
  30. }  
  31. rightComponent={  
  32. <Button 
  33. icon={{ name: this.props.rightIcon }}  
  34. buttonStyle={{  
  35. backgroundColor: null,  
  36. padding: 0,  
  37. }}  
  38. title='' 
  39. color={colors.WHITE}  
  40. onPress={this.props.rightOnPress}  
  41. />}  
  42. /> 
  43. </View> 
  44. }  
  45. }  
  46. ScreenHeader.propTypes = {  
  47. leftIcon: PropTypes.string,  
  48. rightIcon: PropTypes.string,  
  49. centerText: PropTypes.string,  
  50. leftOnPress: PropTypes.func,  
  51. rightOnPress: PropTypes.func  
  52. };  
  53. export default ScreenHeader; 

现在我们就可以让页面代码只关注不同页面的实现逻辑,并且提供一个带有若干PropTypes 的API,开发者可以将其传递给<ScreenHeader />。

喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书会第9群:808517103

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢