我是新的React-本机我想stytle，但我得到错误

8ehkhllq 于 2023-03-03 发布在 React

关注(0)|答案(1)|浏览(125)

我想在react-native中设计一个组件的样式，但是我得到了错误，我已经尝试了所有我能做的，但是我需要更多关于如何去做的解释。

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

export const RoundedButton = ({
  style={},
  textStyle={},
  size=125,
  ...props
})=>{
  return (
    <TouchableOpacity style={[styles(size).radius, style]}>
    <Text style={[styles.text, textStyle]}>{...props.title}</Text>
    </TouchableOpacity>
  )
}

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

})

这是我在react-native中使用样式时遇到的错误，但我仍然遇到相同的问题

src/components/RoundedButton.js (18:3)
Unused style detected: undefined.radius (react-native/no-unused-styles)
(ESLint)
src/components/RoundedButton.js (23:3)
Unused style detected: undefined.text (react-native/no-unused-styles)
(ESLint)

react-native

来源：https://stackoverflow.com/questions/75594787/im-new-to-react-native-i-want-to-stytle-but-im-getting-error

1条答案

按热度按时间

ulydmbyx1#

我试了你的代码，首先你有一个错误：
错误React中不支持跨页子项
不要这样做：

<Text style={[styles.text, textStyle]}>{...props.title}</Text>

但是：

<Text style={[styles.text, textStyle]}>{props.title}</Text>

...我认为您应该使用其他样式：

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

这是所有的代码：

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

export const RoundedButton = ({
  style={},
  textStyle={},
  size=125,
  ...props
})=>{
  return (
    <TouchableOpacity style={[styles(size).radius, style]}>
    <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  )
}

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

})

赞(0）回复(0）举报 2023-03-03

我来回答

我是新的React-本机我想stytle，但我得到错误

1条答案

相关问题

热门标签

最新问答