如何在React Native中实现代码复用？及如何创建可复用Customer组件以便捷嵌入Shop组件？

嘿，我来帮你搞定这两个问题！先聊聊React Native里怎么实现代码复用，再帮你把那个Customer组件改得能正常用在Shop里～

在React Native里，代码复用主要有这几种常用思路，你可以根据场景灵活选择：

• 可复用UI组件：这是最直观的方式，把重复出现的UI元素（比如你想做的Customer信息展示）抽成独立组件，像搭积木一样在不同页面/组件里调用
• 自定义Hook：如果是业务逻辑（比如获取用户数据、处理状态）重复，就把逻辑抽成自定义Hook，比如useCustomerData，让多个组件共享相同逻辑
• 高阶组件（HOC）：用一个组件包裹另一个组件，给它附加额外功能（比如权限校验、数据注入），不过现在自定义Hook更灵活，用得更多
• Render Props：通过props传递渲染函数，让组件的部分UI逻辑可以动态自定义，适合需要高度灵活的场景
• 工具函数：纯逻辑的代码（比如格式化ID、处理名字）单独放到utils文件里，哪里需要哪里调用

你写的Customer组件有几个小问题，我帮你改好，这样就能在Shop里正常使用啦：

首先是修正后的Customer组件：

import { View, Text } from 'react-native';

// 函数组件接收props对象，用解构赋值拿到name和ID
const Customer = ({ name, ID }) => {
  // React组件必须返回单个根元素，这里用View把两个Text包起来
  return (
    <View style={{ marginVertical: 8, paddingHorizontal: 12 }}>
      <Text style={{ fontSize: 12, fontWeight: '500' }}>{name}</Text>
      <Text style={{ fontSize: 10, color: '#666', marginTop: 4 }}>{ID}</Text>
    </View>
  );
};

为什么这么改？

• 函数组件的参数是props对象，不是单独的name和ID，所以要用解构赋值({ name, ID })来提取参数
• React要求组件必须返回单个根元素，所以用View把两个Text包起来，不然会直接报错
• 加了一点内边距、外边距和字体样式，让展示效果更舒服，你可以根据自己的需求调整样式细节

然后是修正后的Shop组件：

import { DraxProvider, DraxView } from 'react-native-drax'; // 假设你用的是这个拖拽库

function Shop() {
  return (
    <DraxProvider>
      <DraxView style={{ marginBottom: 8 }}>
        <Customer name="A" ID="1" />
      </DraxView>
      <DraxView style={{ marginBottom: 8 }}>
        <Customer name="B" ID="2" />
      </DraxView>
      <DraxView>
        <Customer name="C" ID="3" />
      </DraxView>
    </DraxProvider>
  );
}

这里主要修正了标签闭合的问题：

• 原来的<Customer name="A" ID="1">没有闭合，改成自闭合标签<Customer name="A" ID="1" />（或者加</Customer>也可以）
• 给DraxView加了一点下边距，避免元素挤在一起，你可以按需调整样式

如果想让组件更健壮，可以加类型校验：

用PropTypes做类型检查（JavaScript项目） #

import PropTypes from 'prop-types';

Customer.propTypes = {
  name: PropTypes.string.isRequired, // 必须传递的字符串类型
  ID: PropTypes.string.isRequired,
};

用TypeScript做类型约束（TypeScript项目） #

import { View, Text } from 'react-native';

interface CustomerProps {
  name: string;
  ID: string;
}

const Customer = ({ name, ID }: CustomerProps) => {
  return (
    <View style={{ marginVertical: 8, paddingHorizontal: 12 }}>
      <Text style={{ fontSize: 12, fontWeight: '500' }}>{name}</Text>
      <Text style={{ fontSize: 10, color: '#666', marginTop: 4 }}>{ID}</Text>
    </View>
  );
};

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