reactjs - 如何使用数据库条目在 React Native 中渲染样式？

Question

我想根据数据库中每个项目保存的样式名称来设置 React Native 应用程序中的列表项目的样式。数据库中的样式名称引用了我的样式中的“类”，但我不确定如何在我的 View 中正确调用“类”，以便它呈现样式。

数据库条目(这里redItem是一个类名):

var ITEMS_DATA = [
{location: 'Manhattan', color: 'redItem'} ];

查看:

<TouchableHighlight key={i} style={[styles.listItem, styles.{{item.color}}]}>
<View>
    <Text style={CardStyles.gameSection}>{item.location}</Text>
</View> </TouchableHighlight>

样式表中的样式:

redItem: { backgroundColor: '#e91e63' },

注意 TouchableHighlight 中的 styles.{{game.color}} - 这是我想通过引用的类名引入样式的地方。

目前，当我加载模拟器时，我收到一个 SyntaxError。

请注意，我是一名非常初级的程序员。谢谢!

Answer 1

要从 Javascript 对象访问动态命名的属性，请使用 object[name]。在您的情况下，您可以使用 styles[item.color] 访问它。在您的代码片段中，这将如下所示:

<TouchableHighlight key={i} style={[styles.listItem, styles[item.color]]}>
<View>
    <Text style={CardStyles.gameSection}>{item.location}</Text>
</View> </TouchableHighlight>

我在本地测试了这个，并且像这样访问 StyleSheet 的属性是有效的。