如何让React Native中基于react-native-fontawesome的组件可复用？

当然可以实现组件复用！我们可以通过React Native的props机制，让父组件传入需要定制的内容，把这个按钮组件变成一个通用的可复用组件。

改造后的完整组件代码 #

import React, { Component } from 'react';
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native';
import FontAwesome from 'react-native-fontawesome';

export default class AwesomeButton extends Component {
  render() {
    // 从props中解构属性，同时设置默认值保证组件容错性
    const { 
      icon = Icons.chevronLeft, 
      buttonText = 'Text', 
      onPress = () => {},
      textStyle = {},
      containerStyle = {}
    } = this.props;

    return (
      <View style={[styles.container, containerStyle]}>
        <TouchableHighlight onPress={onPress} style={styles.touchable}>
          <Text style={[styles.text, textStyle]}>
            <FontAwesome>{icon}</FontAwesome>
            {buttonText}
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

// 定义基础样式，方便父组件按需覆盖
const styles = StyleSheet.create({
  container: {},
  touchable: {},
  text: {
    margin: 10,
    fontSize: 15,
    textAlign: 'left'
  }
});

关键改造点说明 #

• 自定义图标：通过icon属性接收父组件传入的FontAwesome图标，默认值设为原来的Icons.chevronLeft，确保组件在未传值时也能正常渲染。
• 自定义按钮文本：用buttonText属性接收父组件传递的文本内容，默认保留原有的'Text'作为兜底。
• 绑定点击逻辑：新增onPress属性，让父组件可以自定义按钮点击后的行为，默认设置空函数避免未传值时报错。
• 灵活定制样式：提供textStyle和containerStyle属性，父组件可以传入额外样式，通过数组语法和组件基础样式合并（传入的样式会覆盖基础样式）。

父组件中使用示例 #

// 先导入改造后的组件
import AwesomeButton from './AwesomeButton';

// 在父组件的render方法中使用
<AwesomeButton
  icon={Icons.check}
  buttonText="确认操作"
  onPress={() => console.log('按钮被点击啦')}
  textStyle={{ color: '#2ecc71', fontSize: 18 }}
/>

这样你的组件就完全具备复用性了，不管是图标、文本、样式还是点击逻辑，都能在父组件中灵活定制～

内容的提问来源于stack exchange，提问作者Etoya