NativeBase自定义组件样式


http://nativebase.io/docs/v0.5.13/customize#themingNativeBaseApp

对于NativeBase中的组件,我们可以根据实际需要来进行自定义组件颜色、高度、大小等。

准备

  1. 复制light.js文件(/node_modules/native-base/Components/Themes/light.js)
  2. 创建文件夹Themes在我们的项目中,然后粘贴刚刚复制的文件,重新命名为myTheme.js
  3. 在我们需要自定义的文件中导入文件Themes/myTheme.js
  4. 进入Themes/myTheme.js文件中找到相应的组件,可以自定义改变

用法

<Container theme={myTheme}>
    <Header>
        <Title>课程</Title>
    </Header>
    <Content>
        <Button block style={{marginTop:30}}><Text>我是课程</Text></Button>
    </Content>
    <Footer>
        <TabsFooter />
    </Footer>
</Container>

举例-修改底部背景及字体颜色

默认底部颜色样式为:

修改后:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM