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

【问题标题】：React native dynamic themes through json data通过 json 数据反应原生动态主题
【发布时间】：2017-09-24 18:31:43
【问题描述】：

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

【问题讨论】：

标签： css ajax reactjs react-native react-redux

【解决方案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>;

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

【讨论】：