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 (
      <View style={{padding:40}}>
         <List  styles={StyleSheet.create(newListStyle)} >      
         <View style={{flexDirection:'row',alignItems:'center'}}>
         <View>
              <Text>
                手机号码
              </Text>
            </View>             
          <InputItem
             style={{flex:1,height:45,borderStyle: "solid", borderWidth: 1, borderColor: "#cccccc",paddingHorizontal:16,paddingVertical:12}}
            type="phone"
            placeholder="input your phone"
            error={this.state.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChange}
            value={this.state.value}
          >            
          </InputItem>
          </View>
        </List>
      </View>
    );
  }
}

class App extends Component {
  render() {
    return (
      <H5NumberInputExample />
    )
  }
}


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的样式

结束

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容