处理动态样式表的非未使用样式

Question

在react-native中，使用动态样式，如下所示：

const myComponent = () => {

    const styles = createStyles(theme)

    return (
        <View style={styles.container}>
        </View>
    )
}

const createStyles = theme => StyleSheet.create({
    container: {
        backgroundColor: theme.background,
    },
})

如何避免从react-native/no-unused-styles收到eslint警告？

Answer 1

将Stylesheet.create分配给与组件内的样式变量同名的变量可以解决该问题。

const myComponent = () => {

const styles = createStyles(theme);

return {
    <View style={styles.container}/>
}

const createStyles = theme => {
  const styles = StyleSheet.create({
    container: {
        backgroundColor: theme.background,
    },
  })
  return styles;
}

Answer 2

这不是最好的解决方案，但这是我想到的唯一一个解决方案，因为 eslint 在这里出错了......

const styles = ({ color }: ListDecorationProps) =>
  StyleSheet.create({
    // eslint-disable-next-line react-native/no-unused-styles
    bullet: {
      borderRadius: 999,
      zIndex: 5,
      width: 20,
      height: 20,
      backgroundColor: color,
    },
  });