如何在同一页面使用 StyleProvider 设置 header 和按钮的样式？

Question

为了使用 <StyleProvider> 在 Native Base 上设置组件样式，我已经苦苦挣扎了两天。我想更改 header 的背景颜色并在按钮上添加自定义样式属性。

<Container>
    <Header /> /*change backgroundColor*/
    <Content>
        <Button viewDetail block> /*add 'viewDetail' as custom style property */
            <Text>Button</Text>
        </Button>
    </Content>
</Container>

Answer 1

有很多方法可以做到这一点。一种方法是按照 here给出的说明进行操作. 或者，您可以更改按钮主题文件并添加类似的样式属性，例如 success shown here.

Answer 2

希望对您有所帮助，您必须使用 NativeBase2

<StyleProvider style={getTheme(commonColor)}>
  <Header>
    <Left>
      <Button transparent>
        <Icon name="arrow-back" onPress={() => this.props.routerActions.pop()} />
      </Button>
    </Left>
    <Body>
      <Title>Profile</Title>
    </Body>
    <Right></Right>
  </Header>
 </StyleProvider>

为了弹出主题，只需打开此 link 并关注 http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp

现在，如果您想要自定义，只需查找

native-base-theme/components/Header.js

native-base-theme/variables/commonColor.js

Answer 3

我想，我自己的问题有了答案。从 'native-base-theme/components/' 而不是变量导入所有组件。

代码会是这样

import getTheme from './native-base-theme/components';

并添加<StyleProvider>，然后添加道具样式<StyleProvider style={getTheme()}>。

如何在同一页面使用 StyleProvider 设置 header 和按钮的样式？

How to styling header & button with StyleProvider at the same page?

react-native

native-base