1

I've struggling for two days to styling components on Native Base with <StyleProvider>. I want to change background color of header and add custom style property on the button.

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

3 回答 3

3

I think, I have the answer for my own question. Import all components from 'native-base-theme/components/' instead of variables.

The code will be like this

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

and add <StyleProvider>, then add prop style <StyleProvider style={getTheme()}>.

于 2017-02-23T18:17:31.120 回答
1

There are many ways of doing this. One way would be to follow the instructions given here. Alternatively, you can change the button theme file and add a similar style property like success shown here.

于 2017-02-21T15:25:53.303 回答
0

I hope this will help you, You must be using 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>

For ejecting theme, Just open this link and follow http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp

Now If you want to customise just look for

native-base-theme/components/Header.js

native-base-theme/variables/commonColor.js

于 2017-02-21T17:36:26.573 回答