React Native开发跳坑之native-base自定义样

最近在做React Native的开发，作为一名java程序员，搞一搞app开发还是蛮有意思的。但是毕竟是跨平台开发，所以遇到的坑还是挺多的。因此我打算记录一下这些坑与跳坑经历，希望可以帮到和我一样的新手。

开发平台的搭建就不赘述了，按照网上的资料和官网的Demo都能把HelloWorld搞出来，在这里我只记录一些，花了较长时间才解决的问题。本篇文章解决的问题是在使用第三方UI插件native-base如何自己定义样式。

在使用RN时，自己写按钮啥的都太费劲，况且对于我这种从java转过来凑热闹的，根本也不会写啊。还好有一些强大的第三方组件可以用。native-base就是我给项目引入的一个UI组件，它包含几乎所有的常见控件，像Button，Icon，Badge等等。但是在使用过程就遇到需要修改默认样式的问题，网上苦苦寻找好久，最后还是在native-base官网（https://nativebase.io/）找到了答案。

打开官网-点击docs-点击左侧customize可以看到问题的答案：

• 执行node node_modules/native-base/ejectTheme.js命令，这时会在项目根目录出现一个新文件夹：

  
  新文件目录
• 这里面包含有commonColor.js，material.js，platform.js（默认）三种预设的主题。下面是引用方式：

import React, { Component } from 'react';
import { Container, Content, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
​export default class ThemeExample extends Component {
  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container>
          <Content>
            <Text>
              I have changed the text color.
            </Text>
          </Content>
        </Container>
      </StyleProvider>
    );
  }
}

这样我们就可以使用对应的主题了，这时的主题是使用的刚才新生成的样式文件，你可以在里面开心地自定义样式了！是不是很简单？
阿里云优惠

React Native开发跳坑之native-base自定义样式