React Native组件样式报错求助：ESLint提示未使用样式

问题根源 #

你的代码存在两个核心问题，直接导致了ESLint报错和潜在运行错误：

1. 样式调用方式错误：styles是接收size参数的函数，必须先调用styles(size)获取样式对象，才能访问radius和text属性；直接写styles.text会导致引用undefined.text，触发ESLint报错。
2. JSX语法错误：{...props.title}是错误写法，扩展运算符...用于展开对象/数组，不能用来读取单个属性值。

修正后的完整代码 #

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  title = '',
  ...props
}) => {
  // 提前调用样式函数，获取当前size对应的样式对象
  const buttonStyles = styles(size);
  return (
    <TouchableOpacity style={[buttonStyles.radius, style]} {...props}>
      <Text style={[buttonStyles.text, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) => StyleSheet.create({
  radius: {
    borderRadius: size / 2,
    width: size,
    height: size,
  },
  text: {
    color: '#fff',
    fontSize: 20,
  },
});

关键修改说明 #

• 提前调用styles(size)得到buttonStyles对象，确保正确引用样式属性，同时让ESLint识别到样式已被使用，消除未使用样式的报错。
• 单独解构title属性并设置默认值''，直接用{title}渲染文本，修复语法错误。
• 将剩余的props（如onPress等交互属性）通过{...props}传递给TouchableOpacity，保证组件的交互功能正常。

额外优化建议 #

如果组件的size参数不会频繁变化，可以用useMemo缓存样式对象，避免每次渲染都重新创建StyleSheet，提升性能：

import React, { useMemo } from 'react';

// 在组件内部替换buttonStyles的定义：
const buttonStyles = useMemo(() => styles(size), [size]);

内容的提问来源于stack exchange，提问作者Aderoba Dayo Jerry