http://nativebase.io/docs/v0.5.13/customize#themingNativeBaseApp
对于NativeBase中的组件,我们可以根据实际需要来进行自定义组件颜色、高度、大小等。
准备
- 复制light.js文件(/node_modules/native-base/Components/Themes/light.js)
- 创建文件夹Themes在我们的项目中,然后粘贴刚刚复制的文件,重新命名为myTheme.js
- 在我们需要自定义的文件中导入文件Themes/myTheme.js
- 进入Themes/myTheme.js文件中找到相应的组件,可以自定义改变
用法
<Container theme={myTheme}> <Header> <Title>课程</Title> </Header> <Content> <Button block style={{marginTop:30}}><Text>我是课程</Text></Button> </Content> <Footer> <TabsFooter /> </Footer> </Container> |
举例-修改底部背景及字体颜色
默认底部颜色样式为:
修改后: