使用 react native ui kitten 为 React Native 设置主题答案

【问题标题】：Theming for React Native using react native ui kitten使用 react native ui kitten 为 React Native 设置主题
【发布时间】：2018-10-14 04:43:59
【问题描述】：

我正在尝试使用 react-native-ui-kitten 来响应原生组件并且它的工作效果很好。最近我想在我的应用程序中添加主题，为此我使用了他们的 'RkTheme' 和 'RkType' 但没有一个工作。

期望 - 使用 RkTheme.setTheme(themeJson) 设置主题应该会改变已经呈现在屏幕上的元素的样式

实际 - 使用 RkTheme.setTheme(themeJson) 设置主题不会改变已渲染组件的样式。

下面是json包的一部分

  "dependencies": {
"prop-types": "^15.6.1",
"react": "16.2.0",
"react-dom": "^16.3.1",
"react-native": "0.51.0",
"react-native-linear-gradient": "^2.4.0",
"react-native-popup-menu": "^0.9",
"react-native-ui-kitten": "3.1.2",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "1.0.0-beta.11",
"react-redux": "^5.0.7",
"realm": "^2.15.3",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"util": "^0.11.0",

react 组件的示例代码

    import React from 'react'
import { StyleSheet, Text, View, Image, Button , TouchableOpacity} from 'react-native'
import {applyTheme} from '../config/bootstrap'
import {RkStyleSheet, RkTheme} from 'react-native-ui-kitten'
import { LightTheme } from '../config/lightTheme';
import { DarkTheme } from '../config/darkTheme';
export default class Sample extends React.Component {
  constructor(props){
    super(props)
    this.changeTheme = this.changeTheme.bind(this)
  }
  changeTheme(theme){
    if(theme){
      RkTheme.setTheme(DarkTheme,null)
    } else {
      RkTheme.setTheme(LightTheme,null)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Sample</Text>
        <TouchableOpacity  onPress = { (e) => this.changeTheme(false) }>
          <Text style={styles2.button1}>Apply Light</Text>
        </TouchableOpacity>
        <TouchableOpacity   onPress = { (e) => this.changeTheme(true) }>
          <Text style={styles2.button1}>Apply Dark</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})
const styles2 = RkStyleSheet.create(theme => ({
  button1 : {
    color : theme.colors.secondaryColor
  }
}))

【问题讨论】：

你的方法RkTheme.setTheme(DarkTheme,null)的第二个参数是什么？
感谢您的回复。我检查了库中的“setTheme”方法。它只有一个参数。我使用了这两个参数，因为这就是他们在其中一个演示应用程序中所做的事情。 RkTheme.setTheme(DarkTheme, null) 和 RkTheme.setTheme(DarkTheme) 都不起作用
我查看了 .setTheme() ，它合并了现有主题和新主题。我不知道那会是什么效果。
你遇到过他们的主要文档吗？你的方法应该按照这个文档 [1] 工作：akveo.github.io/react-native-ui-kitten/#/docs/quick-start/theme
在他们的演示应用程序中，github.com/akveo/kittenTricks/blob/master/README.md 提供的链接可以实时更改组件的样式。我尝试在他们的演示应用程序中使用我的问题中发布的相同代码，它工作得很好。一旦我按下它们，它就会改变“应用浅色”和“应用深色”的文本颜色。我在我和他们的代码中看到的唯一区别是他们使用的是 expo react native sdk，而我使用的是 npm 的 react native。

标签： reactjs react-native react-native-ui-kitten

【解决方案1】：

我们需要将'withRkTheme'添加到我们认为在更改主题后会实时更改主题颜色的组件中。另外需要注意的一点是，如果我们在根组件的渲染函数中使用任何其他自定义组件，自定义组件应该扩展“RkComponent”而不是“React.Component”。仅此一项就解决了我的问题。

【讨论】：