react-naive自定义antd-mobile组件中样式

1.先上效果图

（使用的版本信息："antd-mobile": "^2.1.9", "react-native": "0.55.4"）

左图为官网给的例子,右图是自定义样式后的

2.直接上代码

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import { List, InputItem, Toast } from 'antd-mobile';
import listDefaultStyle from 'antd-mobile/lib/list/style/index.native';
import { createForm } from 'rc-form';
const newListStyle = {
  ...listDefaultStyle,
  BodyBottomLine:{
    ...listDefaultStyle.BodyBottomLine,
    borderBottomWidth: 0,  
  },
  Body:{
    ...listDefaultStyle.Body,
    padding: 1,
    borderTopWidth: 0
  }
}
class H5NumberInputExample extends Component {
  state = {
    hasError: false,
    value: '',
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info('请输入11位数字');
    }
  }
  onChange = (value) => {
    if (value.replace(/\s/g, '').length < 11) {
      this.setState({
        hasError: true,
      });
    } else {
      this.setState({
        hasError: false,
      });
    }
    this.setState({
      value,
    });
  }
  render() {
    return (
      
               
         
         
              
                手机号码
              
                         
                      
          
          
        
      
    );
  }
}

class App extends Component {
  render() {
    return (
      
    )
  }
}


export default App;

3.使用说明

先找到你要修改的组件的样式，例子中我想修改的是list组件，具体需求实际上就是想去到list中的上下的border,最开始尝试直接在list组件上直接写style，结果无效就想到自己定义样式。

a.首先引用你想要重新定义的组件的样式资源文件

实际代码引入要重定义的资源样式

b.看看引用的index.native里面有什么（见下图），可以看到里面就是组件的样式文件，因为我只想修改list组件的border，所以我只需重新定义Body，BodyBottomLine这两个地方的样式

antd-mobile/lib/list/style/index.native文件的代码片段

c.具体修改样式代码

实际代码修改Body和BodyBottomLine的样式

结束