通过 json 数据反应原生动态主题

Posted 2023-02-19

【中文标题】通过 json 数据反应原生动态主题

【英文标题】：React native dynamic themes through json data

【发布时间】：2017-09-24 18:31:43

【问题描述】：

在本机反应中，我如何覆盖我的自定义样式而不是动态样式，其中字体大小和背景颜色从服务器返回 JSON 数据？ 我想在我的样式主题中设置那个 JSON 数据主题？你能把接受 JSON 数据（如字体大小或颜色）并创建动态主题的那种样式的语法发给我吗？

【参考方案1】：

你总是可以在一个组件中自定义你的样式，假设你有一个组件：

const MyComponent = (size, color) => <Text style=color: color, fontSize:size>Hello</Text>;

在您的父组件中，您可以从服务器端检索您的主题数据，例如

const themeJson = retrieveTheme()  // some API call

假设您在检索到的 JSON 数据中有 color 和 size。 您始终可以将主题颜色和字体大小传递给MyComponent as

<MyComponent color=themeJson.color fontSize=themeJson.size />

然后，文字大小和颜色将根据主题 JSON 数据进行更改。

在 react native 中，样式定义与 react 不同，它使用StyleSheet 创建样式实例，我们不能像我们在 React 项目中所做的那样更改它（这是一个 JSON 对象），如果你想自定义它在渲染它时，您总是可以将自定义样式放在数组中，如

const styles= StyleSheet.create(
   existStyle=
     color: "red",
     fontSize: 15
   
);

const MyComponent = (size, color) => 
<Text style=[styles.existStyle, color: color, fontSize: size] style=color: color, fontSize:size>Hello</Text>;

它将覆盖您在顶部定义的现有样式。希望它会有所帮助。