Question

我正在使用Native Base 2.0+，主题被弹出并使用StyleProvider我可以根据我的主题调整和自定义任何Native Base组件，没问题。

在docs之后，声明要将主题添加到自定义组件，我们应该为所述组件定义命名空间，并将其与实例化样式合并。代码示例如下：

import React, { Component } from 'react'
import { Header, Left, Body, Right, Button, Title, Text, connectStyle } from 'native-base'
import Colors from '../Themes/Colors'
import ApplicationStyles from '../Themes/ApplicationStyles'

class NBHeader extends Component {
  render () {
    const styles = this.props.style
    return (
      <Header style={styles.header}>
        <Left>
          <Button transparent>
            <Text style={styles.headerBackButton}>
              {'< Back'}
            </Text>
          </Button>
        </Left>
        <Body>
          <Title>Login</Title>
        </Body>
        <Right />
      </Header>
    )
  }
}

export default connectStyle('CustomComponents.Header', ApplicationStyles)(NBHeader)

在这种情况下，组件的名称空间是“CustomComponents.Header”。然后，我们使用StyleProvider连接主题：

import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
class CustomComponent extends Component {
  render() {
    return (
      // connect styles to props.style defined by the theme
      const styles = this.props.style;
      <StyleProvider style={customTheme}>
        Your Custom Components
      </StyleProvider>
    );
  }
}
// Define your own Custom theme
const customTheme = {
  'yourTheme.CustomComponent': {
    // overrides CustomComponent style...
  }
};

由于我已经弹出主题，我在NB的主题文件中输入了自定义组件的新命名空间，因此它应该已经使用StyleProvider添加和级联。

例如，如果我希望标题为“红色”并且由于主题规则而填充“10”，我将其添加为'CustomComponents.Header'的默认道具，忘记它，只要StyleProvider是级联主题，它将始终应用于组件。

问题是我无法获得这个定义的自定义组件的默认主题。我不知道我的代码是否存在问题或Native Base的工作原理。任何帮助将不胜感激，如果需要，我可以提供更多代码。

如何为Native Base创建和连接自定义组件主题

0 个答案: