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

IT技术 reactjs react-native
2021-04-01 17:43:44

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

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

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

或者我是否必须将它与 TouchableHightlight 内的容器嵌套，并将内联样式放在该元素上？

3个回答

你的括号错了。如果您打算继续使用数组语法，请改用：

<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}
这样做的一个好处是您可以组合多种外部样式。
2021-05-23 17:43:44
这个答案既适用于 iOS，也适用于使用 Expo 的 Web。
2021-06-12 17:43:44

可以使用传播语法：

<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00'}}
这是对非常旧的评论的回复，但发生上述两个错误的原因是因为您需要在传播多个样式时将传播运算符“...”添加到每个样式中..像这样：{{... style.center, ...styles.textDay, backgroundColor: '#f0f"}} - 请注意，在上面的评论中，styles.textDay 中缺少“...”（希望这个小回复可以为窥视>=2019)
2021-05-24 17:43:44
谢谢，这是一个不错的选择。我还没有在文档中看到那么多样式的扩展语法，所以我会接受另一个答案，但两者都很好用！
2021-05-25 17:43:44
适用于 iOS，但不适用于使用 Expo 的 Web 浏览器。
2021-06-07 17:43:44
但是这个答案看起来不正确，IMO，你测试了吗？它传递的是一组样式对象，而不是单个组合样式对象。
2021-06-09 17:43:44
实际上，另一个与数组一起工作，也与多个styles.xxx 和传播一个没有。显然我没有正确尝试。当我尝试时，<Text style={{ ...styles.centered, styles.textDay, backgroundColor: '#f0f'}}>我得到了Unexpected token，并<Text style={{ ...styles.centered, backgroundColor: '#f0f'}}>给出了在这种环境中分配的来源必须是一个对象。很奇怪，我使用的是 React 15.2.1 和 React Native 0.29.0。
2021-06-21 17:43:44

这是在 React Native 0.44.2 中测试的正确答案：

<TouchableHighlight style={{...styles.button, ...{backgroundColor: '#f00'}}}>
我用之前的评论测试了自己做了一些测试，我让它工作了 ;) 官方文档它不好......
2021-05-26 17:43:44
感谢您帮助 OP，您能否添加更多解释/官方文档，以帮助看到您答案的其他人理解其背后的“原因”？
2021-06-07 17:43:44
其它你可能感兴趣的问题
上一篇如何在react js中从一个页面导航到另一个页面？ 下一篇单击时更改按钮的样式