NativeBase 主题配置

NativeBase 个人感觉资料等在开源的react-native组件库中算是比较出色的,官网还提供了不少集成其他状态管理,路由的demo.查资料没有看到过关于他V2版本的主题相关的中文说明,他官网感觉说的也不直白.大概按我的理解说一下他的自定义主题配置

NativeBase Customizer

官网有提供可视化主题颜色配置页面,设置完颜色后,下载variables.js .可以下载单个组件的,也可以设置全部的.

Theme and Variables

运行 node node_modules/native-base/ejectTheme.js 将nb的主题配置暴露到native-base-theme,包含俩个目录

components: Theme styling files for all the NativeBase components. This is where you would change the style properties of the components if you need to.

Example, if you need to change the height of Button component, you’ll need to change height in native-base-theme/components/Button.js.

variables: Contains three preset theme variable files, namely Platform, material, commonColor. You can change the variables (for color, fontFamily, iconFamily etc) for a uniform look and feel throughout your app.

Set Up

官网提供的下面的这个例子,Platform,Material,CommonColor,从variables目录里面选择一个官方提供了默认三套主题,可以修改一下对应js的变量,参考Theme variables Cheat sheet设置.

import React, { Component } from 'react';
import { Container, Content, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
​export default class ThemeExample extends Component {
  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container>
          <Content>
            <Text>
              I have changed the text color.
            </Text>
          </Content>
        </Container>
      </StyleProvider>
    );
  }
}

Theme Color

Theme Font

可选择字体

Button

• With Variables
  比如修改Button样式,可以从可视化修改页面下载variable.js,然后结合下面配置

  import React, { Component } from 'react';
  import { Container, Content, Button, Text, StyleProvider } from 'native-base';
  
  import React, { Component } from 'react';
  import { Container, Content, Button, Text, getTheme, StyleProvider } from 'native-base';
  //  从可视化网站下载
  import customVariables from './Themes/variable';
  ​// buttonTheme is the customized theme of Button Component​,
  // 我理解就是native-base-theme/components下面找对应的js
  import buttonTheme from './Themes/buttonTheme';
  ​// getTheme is default theme of NativeBase Components
  // customVariables is customized variables used in the components theme
  export default class ThemeButtonExample extends Component {
    render() {
      return (
        <Container>
          <Content>
            <StyleProvider style={buttonTheme(customVariables)}>
              <Button primary>
                <Text> Primary </Text>
              </Button>
              <Button success>
                <Text> Success </Text>
              </Button>
              <Button info>
                <Text> Info </Text>
              </Button>
              <Button warning>
                <Text> Warning </Text>
              </Button>
              <Button danger>
                <Text> Danger </Text>
              </Button>
              <Button small>
                <Text> Small </Text>
              </Button>
              <Button>
                <Text> Default </Text>
              </Button>
              <Button large>
                <Text> Large </Text>
              </Button>
            </StyleProvider>
          </Content>
        </Container>
      );
    }
  }

Theme Your Custom Component

可是结合官方的 StyleSheet 提供的styles ,可以覆盖,如果冲突? 这个有覆盖这个还没具体测试,yourTheme感觉也是可以随便写,
CustomComponent就是你写的这个组件的给的命名

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connectStyle } from 'native-base';
class CustomComponent extends Component {
  render() {
    // connect styles to props.style defined by the theme
    const styles = this.props.style;
    return (
      <View style={styles.container}>
        <Text style={styles.textContent}>
          Your Component with static style
        </Text>
      </View>
    );
  }
}
const styles = {
  container: {
    flex: 1,
    backgroundColor: 'green',
  },
  textContent: {
    fontSize: 20,
    color: 'red',
  },
};
// connect the component to the theme
export default connectStyle('yourTheme.CustomComponent', styles)(CustomComponent);