我宁愿把我的样式放在一个单独的文件styles.js中。在styles.js中：

export const styles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

在你的主类中你可以传递值

return (
    <Icon style={styles(this.props).icon} />
  );

或者，您可以直接使用这些值

export const styles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

在你的主类中

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );

i在样式表中发送noFooter布尔属性

<View style={styles.mainFooterCont(noFooter)}>
     <Text> Testing </Text>
    </View>

接受它就像

mainFooterCont: noFooter => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'flex-end',
   paddingBottom: noFooter ? 0 : 20,
   paddingTop: Metrics.ratio(noFooter ? 0 : 5),
   }),

创建一个以iconColor和iconSize为参数并返回StyleSheet对象的类

// styles.js

export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.js

render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}

只需将样式表 Package 在一个函数中，您可以选择性地传递props。
取代：

const styles = StyleSheet.create({
  Title: { color: 'white' }
});

您需要：

const styles = (props?: any) => StyleSheet.create({
  Title: { color: 'white' }
});

现在当你将它们添加到你的组件中时，而不是

style={styles.Title}

您需要：

style={styles(propsObjectHere).Title}

由于这是可选的，并且您没有要传递的props，只需执行：

style={styles().Title}

P.S.如果您出于某种原因没有使用TypeScript，请忽略该类型：P

如果你不想创建一个类，那么你只需要创建一个函数，后面跟着一个键，然后从函数中返回一个对象，你只需要传递一个参数，通过这个参数来计算条件。

export const Style = StyleSheet.create({
 locatorTextInputContainer: locatorType => ({
        flexDirection: 'row',
        backgroundColor: locatorType == 'None' || locatorType == '' ? GColors.separatorColor : GColors.white,
        marginBottom: 10,
        paddingBottom: 5,
        marginStart: 10,
        marginEnd: 10,
   })
})

你可以按如下方式使用它

<View style={Style.locatorTextInputContainer(locatorType)}>
    <TextInput
        value={sourceLocator}
        onChangeText={(text) => {
            dispatch(setSourceLocator(text))
        }}/>
 </View>

解决方案：

render() {

   const iconColor = this.props.color || '#000';
   const iconSize = this.props.size || 25;

   return (
   <Icon style={{...styles.icon, color: iconColor, fontSize: iconSize }} />

styles.js示例：

const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }})

这里有一个更简单的解决方案。
组件

<View
    style={{
      ...styles?.tabItem_bottomView,
      backgroundColor: selected ? Color?.blue : Color?.white,
    }}
  />

你可以像以前一样使用样式表，那里没有什么可编辑的。

我们可以创建一个样式表函数，然后在main函数中调用它，而不是将props传递给StyleSheet。然后我们可以在函数中使用该变量。我们甚至不会得到TypeScript错误。

const getStyles = (theme: any) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.backgroundVariant,
    },
 })

现在创建函数后，我们可以像下面这样在main函数中调用该函数

const styles = getStyles(theme);

下面是如何实现代码的示例

const Register = memo((_props: RegisterProps) => {
  const theme = useSelector(state => state.theme);
  const styles = getStyles(theme);

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