React Native中设计主题机制

昨天和同事讨论组件隔离性的时候讨论到关于默认样式的问题：很多情况下我们希望能够把组件设计为通用的，然后在具体项目中给他们指定一些通用的样式，譬如：背景颜色、默认字体等等。这听起来在CSS下运作起来就很简单了，我们只要在创建组件的时候指定好className，然后可以用一个独立的theme.css来为某些className绑定样式。

然而，在React Native中我们做不到这一点。甚至，我们还可以在官方文档中的某些部分看到一些这样的讨论：

React组件在概念上被设计为强隔离性的：你应当可以在你应用的任何位置放置一个组件，而且相信只要属性相同，它的外观和表现都将完全相同。文本如果能够继承外面的样式属性，将会打破这种隔离性。

使用一个一致的文本和尺寸的推荐方式是创建一个包含相关样式的组件MyAppText，然后在你的App中广泛使用它。你还可以创建更多特殊的组件譬如MyAppHeaderText来表达不同样式的文本。

然而这并不能改变我们对主题化和全局样式的需求。在这里，我们推荐几种做法，大家可以依据自己的项目习惯和当下的代码结构选择或者组合合适的做法：

1：样式变量

web上，我们从css到scss/sass/less，然后我们才有变量可以用。然而在RN里，我们的样式本来就是JS化的，我们可以自由的使用JavaScript的变量以及其它特性来完成样式化：

// theme.js

var globalTextColor = '#000000',

module.exports = {
    backgroundColor: '#FFFFFF',
    title: {
        size: 32,
        color: globalTextColor
    },
    content: {
        size: 16,
        color: globalTextColor
    }
};

// styles.js
var React = require("react-native");
var {StyleSheet} = React;
var theme = require("./theme")

module.exports = StyleSheet.create({
    titleText : {
        fontWeight: 'bold',
        ...theme.title
    },
    container1: {
        background: theme.backgroundColor
    },
    container2: {
        background: theme.backgroundColor
    },
    content: {
        ...theme.content
    }
})

这样做，我们已经可以把一些需要经常修改的样式（如颜色、字体、尺寸等）和一些结构性的样式（譬如flex、position）等拆分开来，并且可以定义一些可以影响到多个样式的变量（如上文的globalTextColor）。对于日常的样式迭代，这已经可以满足一部分需求了，我们还可以根据自己的需要进行一些定制的预计算。而且这应当是最易理解的方式。不过这并不能实现用户切换主题的需求。

2：在组件上使用多个样式

类似ReactJS中我们使用classnames插件，ReactNative天然就支持使用数组提供多个样式的方式：

<View style={[styles.base, styles.background]} />

所以我们也可以在组件里分开引用默认样式和主题化的样式：注意这里theme返回的不是上文中的一个纯对象，而是另一个stylesheet

var React = require('React');
var styles = require('./styles');
var theme = require('../theme');

class Article extends React.Component {
    render(){
        return (
            <View style={[style.container, theme.container]}>
                <Text style={[styles.title, theme.title]}>
                    {this.props.title}
                </Text>
                <Text style={[styles.content, theme.content]}>
                    {this.props.content}
                </Text>
            </View>
        );
    }
};

3. 附加样式

首先，当我们实现一个通用组件的时候，应当让它可以在默认的style的基础上允许附加style（也即：允许外部进一步指定style属性）：

var styleSheet = StyleSheet.create({
    container: {
        flex: 1
    }
})
class Article extends React.Component{
    render(){
        var {
                title, content,
                style, titleStyle, contentStyle,
                ...others
            } = this.props;
        if (Array.isArray(style)){
            style = [styleSheet.container, ...style];
        } else {
            style = [styleSheet.container, style];
        }
        //或者合并成这样一句: style=[styleSheet.container].concat(style);
        return (
            <View style={style} {...others}>
                <Title style={titleStyle}>
                    {title}
                </Title>
                <Content style={contentStyle}>
                    {content}
                </Content>
            </View>
        )
    }
}

// Now you can use in this way:
<Article style={theme.article} title="Title" content="Foo" />

如果所有组件代码都支持附加样式，我们就比较方便通过props来传递额外的样式，这样，我们就可以引入一个新的黑科技：

4. 叠加默认属性黑魔法： 使用增强组件(EnhancedComponent)模式

如果我们可以给一个组件叠加一个默认样式，就可以让我们的许多工作简单的多（譬如上文的Title和Content，可以在Text的基础上直接叠加默认属性和样式得到）

export var Title = enhanceComponent(Text, {
    style: styleSheet
});

export var Content = enhanceComponent(Text, {
    style: {
        fontSize: 16,
    }
});

实际上，这个enhanceComponent很容易实现：

function enhanceComponent(Component, props){
    var {style, ...others} = props;
    return class extends React.Component {
        render(){
            var newProps = {...props};
            for (var k : this.props){
                if (/[sS]tyle$/.test(k) && newProps[k]) {
                    // merge style
                    newProps[k] = [].concat(newProps[k], this.props[k]);
                } else if (k != 'children') {
                    // assign normal prop.
                    newProps[k] = this.props[k];
                }
            }
            return (
                <Component {...newProps}>
                    {this.props.children}
                </Component>
            )
        }
    };
}

所有名字以style或Style结尾的的属性被当做样式处理（处理类似titleStyle的情况）

5. 主题化组件

在3和4的基础上，结合ES6的一部分语法，我们应当可以以一种反向的方法来提供主题：提供一套主题化的组件。在此之前，我们的Article还需要做一些修改来适应：

var styleSheet = StyleSheet.create({
    container: {
        flex: 1
    }
})
class Article extends React.Component{
    render(){
        var {
                title, content, style,
                createTitle, createContent
                ...others
            } = this.props;
        if (Array.isArray(style)){
            style = [styleSheet.container, ...style];
        } else {
            style = [styleSheet.container, style];
        }
        //或者合并成这样一句: style=[styleSheet.container].concat(style);
        return (
            <View style={style} {...others}>
                {createTitle ? createTitle(title) : <Title>
                    {title}
                </Title>}
                {createContent ? createContent(content) : <Title>
                    {content}
                </Title>}
            </View>
        )
    }
}

// Now you can use in this way:
<Article title="Title" content="Foo" createTitle={title=><Title style={theme.title}>{title}</Title>}/>

上面这个修改增加了createTitle和createContent函数，而取消了titleStyle和contentStyle（不够通用），实际上这也接近大部分内置库或第三方库所提供自定义化组件的方式（譬如为ListView提供ScrollBar）。

然后，我们可以编写这样一个themedComponents.js

// themedComponents.js
var themes = require("./themes");
import Article, {Title, Content} from './components/Article';

export var ThemedTitle = enhanceComponent(Title, {
    style: themes.title
});

export var ThemedContent = enhanceComponent(Text, {
    style: themes.content
});

export var ThemedArticle = enhanceComponent(Article, {
    style: themes.article,
    createTitle: title=>(<ThemedTitle>title</ThemedTitle>),
    createContent: content=>(<ThemedContent>title</ThemedContent>),
});

我主要推荐这种3+4+5的方案，因为它可以最小限度的修改已有的组件，也最大程度实现了组件的隔离性和执行结果的可预知性。

6. 另一种思路

实际上如果主题是一个非常通用的需求，那么采用context/props/全局订阅的方式传递主题也是个不错的选择。由于context变动并不一定能触发一次render（React没有承诺这一点），所以我们倾向于使用后两种方案。相比较而言，全局订阅如果过多，可能会影响性能，所以用redux来管理全局theme，再通过props传递应该是一个不错的选择：

function themeReducer(state, action){
    state = state || defaultTheme;
    if (action.type == 'CHANGE_THEME'){
        return action.newTheme;
    }
    return state;
}

我们对应编写我们的可被theme的Component：

class Title extends React.Component {
    render(){
        var {theme, children} = this.props;
        return (
            <Text style={theme && theme.title}>
                {children}
            </Text>
        )
    }
}

class Content extends React.Component {
    render(){
        var {theme, children} = this.props;
        return (
            <Text style={theme && theme.content}>
                {children}
            </Text>
        )
    }
}

class Article extends React.Component {
    render(){
        return (
            var {theme} = this.props;
            <View style={[style.container, theme && theme.container]}>
                <Title theme={theme}>
                    {this.props.title}
                </Title>
                <Content theme={theme}>
                    {this.props.content}
                </Content>
            </View>
        );
    }
};

这意味着你要重新改动一遍你的所有组件，但除此以外这可能是所有方案中最干净的一个。并且，因为涉及到子组件的theme属性，这个方案并不能简单的使用enhanceComponent的方法进行统一的封装。