React Native：如何结合外部和内联样式？

Question

这是_renderRow-function的一部分。我有一些基本的按钮样式，还有一个从行变量中读取的样式。在这个例子中，它是'#f00'，但它可以是一个变量，比如thisColor。我怎样才能将外部样式与内联样式结合起来呢？

像这样的东西，但这并不起作用：

<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}   

还是说我需要在TouchableHighlight内部嵌套一个容器，并在该元素上设置内联样式而不是直接设置TouchableHighlight的内联样式？

- Niclas

Answer 1

您的括号写错了。如果您想继续使用数组语法，可以改为使用以下代码：

<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]} 

- Alex Harrison

---

这样做的好处是您可以结合多个外部样式。 - ryanwebjackson

这个答案在iOS和使用Expo的Web中都有效。 - Jacobdo

Answer 2

可以使用扩展语法：

<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00'}}

- Jeff McCloud

---

谢谢，这是一个不错的选择。我在样式文档中没有看到过扩展语法，所以我会接受其他答案，但两种方法都很好！ - Niclas

但是那个答案看起来不正确，我个人认为，你测试过了吗？它传递的是一个样式对象数组，而不是一个单独的合并样式对象。 - Jeff McCloud

实际上，另一个带有数组的方法也可以工作，还可以使用多种样式.xxx，但是使用展开运算符的方法不行。显然我没有正确地尝试它。当我尝试<Text style={{ ...styles.centered, styles.textDay, backgroundColor: '#f0f'}}> 时，会出现意外的标记，而<Text style={{ ...styles.centered, backgroundColor: '#f0f'}}> 则会出现在此环境中，分配源必须是对象。非常奇怪，我正在使用React 15.2.1和React Native 0.29.0。 - Niclas

这是对非常旧的评论的回复，但上述两个错误发生的原因是，当展开多个样式时，需要在每个样式中添加扩展运算符“...”。就像这样：{{...styles.centered，...styles.textDay，backgroundColor：'#f0f'}}-请注意，在上面的评论中，styles.textDay缺少“...”（希望这个小回复能为2019年及以后的人们澄清事情）。 - Jeff McCloud

可以在iOS上运行，但使用Expo在Web浏览器中无法运行。 - Jacobdo

Answer 3

以下是在 React Native 0.44.2 中测试过的正确答案:

<TouchableHighlight style={{...styles.button, ...{backgroundColor: '#f00'}}}>

- andoni vianez

---

谢谢您帮助原帖作者，您能否添加一些更多的解释/官方文档，以帮助其他看到您的答案的人理解其背后的“原因”？ - dubes

我用之前的注释进行了一些测试，最终使代码正常工作；官方文档不太好用。 - andoni vianez

Answer 4

一些组件可能会接受回调作为样式，所以对于这些情况，这段代码应该可以工作：

import React, { type ComponentProps } from 'react'
import { Pressable, StyleSheet } from 'react-native'

const baseButtonStyles = StyleSheet.create({
  base: {
    // your styles here...
  },
})


export const Button = ({
  children,
  style,
  ...rest
}: { children: React.ReactNode } & ComponentProps<typeof Pressable>) => {
  return (
    <Pressable
      style={
        typeof style === 'function' ? (state) => [baseButtonStyles.base, style(state)] : [baseButtonStyles.base, style]
      }
      {...rest}
    >
      {children}
    </Pressable>
  )
}

- Hleb Siamionau