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这两个地方的样式
c.具体修改样式代码