react-native 结合ant-Design- mobile

react-native 结合ant-Design- mobile, 发现有些组件样式不好调,尤其是嵌套很多层的子组件. 解决办法如下http://www.jianshu.com/p/70b46e305914

-现-在的项目使用的是

react-native

 结合

ant-Design-
mobile

,

但是发现有些组件样式不好调,尤其是嵌套很多层的子组件的字体,颜色,

官方使用

style={}

 作为

props

 的方式传递,
但是嵌套很多层的子组件的部分样式没起作用(不知道为什么), 而且

react-native

中样式基本不具备继承性,除了

Text

,
(想了解的同学可以看大神陈学家的https://segmentfault.com/a/1190000002658374)

1: 先说下解决方法的弊端:

类似web端更改class样式, 只能单个组件的更改, 不能解决更改全局的样式,

(有想做一键切换主题更改全局样式的这个方法暂时不行, 如果大家发现好的方法,欢迎大家提出)
方法1 只可以在原有的样式对象上更改,不能添加新的样式对象,

更新的方法2 可以添加新的样式属性


2: 说下解决方法:

方法1:

举个例子: 比如我们现在需要

ant-Design- mobile

组件中的

SegmentedControl

home.js中引入组件

SegmentedControl

// home.js
import { SegmentedControl  } from 'antd-mobile';
....
....
....
render() {
return(
<View style={Global.container}>
<SegmentedControl
selectedIndex={this.state.selectedIndex}
values={this.segmentedLabel}
onChange={this.onChange}
/>
{this.renderList()}
</View>
);
}

发现字体太小,想调整样式按照组件给的方法, 使用 

style= {[fomtStyle: 100]}

传入样式
, 没有反应,

解决办法思路如下:

1: 去 

node_modules\antd-mobile\lib\segmented-control\index.android.js

中源码,
发现字体组件使用的样式是

itemText对象

return _react2["default"].createElement(_reactNative.TouchableWithoutFeedback, { key: idx, onPress: function onPress(e) {
return _this2.onPress(e, idx, value);
} }, _react2["default"].createElement(_reactNative.View, { style: [_style2["default"].item, itemRadius, {
backgroundColor: idx === selectedIndex ? tintColor : '#fff',
borderColor: tintColor                                                   来看这里
}] }, _react2["default"].createElement(_reactNative.Text, { style: [_style2["default"].itemText, {
color: idx === selectedIndex ? '#fff' : tintColor
}] }, value)));

2: 然后去此组件的

style/index.js

 中可以看到这个对象名,

```
itemText: {
textAlign: 'center',
fontSize: _default2["default"].font_size_caption_sm
}

3: 在

home.js

中引用

style/index.js

 ,
然后更改对象

itemText

的

fontSize值

但是只可以在原有的样式对象上更改,不能添加新的样式对象,不知道为什么,

(谁如果知道为什么, 麻烦告诉下)

....

//引用`style/index.js`
let IndexStyle = require('../../node_modules/antd-mobile/lib/segmented-control/style/index.js');

class Home extends Component {
constructor(props){
super(props);
this.state = {
selectedIndex: 0,
textSize: 50,
};

//  看这里看这里 更改对象itemText的fontSize值

IndexStyle.itemText = {
fontSize: 30,
}

/*   想添加一个自己写的信样式对象上去, 结果没有起效果,
IndexStyle.bgColor = {
backgroundColor: 'red',
}
*/
this.segmentedLabel = ['待办', '已办'];
this.renderList = this.renderList.bind(this);
this.onChange = this.onChange.bind(this);
}

方法2:

同上 ,需要先去看源码, 需要改的样式,在源码中定位到名称

比如这里要更改InputItem　ant-design-mobile中的InputItem 我们需要看下结构, 想更改的样式在组件哪一个cleassName下

比如我们更改marginLeft 左边的距离



FCZY%X89BF9TY68HUR5RGZT.png

我们需更改styles.container,

styles 则是 

import InputItemStyle from './style/index';

所以在 上一级的style文件中找到文件index.tsx

在里面可以看到



NO]B_@YDH$SD%%H2NC$@3IH.png

我们就可以使用下面的方法来修改,

具体思路就是把所有的样式都拿回来, 扔进一个新的对象, 然后更改, 最后在塞回去

import variables from 'antd-mobile/lib/style/themes/default';  //可能你会用的到,可能不需要, 暂时贴在这, 如果需要就添加,  默认的样式主题
import InputItemStyle from 'antd-mobile/lib/input-item/style/index';  //引入要更改组件的样式,

// 定义一个新的样式对象
const newStyle = {};

// 把需要更改的组件的所有样式扔进新的样式对象, 然后更改对应的样式

function changeStyle () {
for (const key in InputItemStyle) {
if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
newStyle[key] = { ...StyleSheet.flatten(InputItemStyle[key]) };
if (key === 'container') {
newStyle[key].marginLeft = 15;
}
}
}
}

.................................
// 塞回去

<InputItem
key={index}
在这里:
styles={StyleSheet.create(newStyle)}

style={{marginLeft: 16,}}
disabled={true}
placeholder={'请输入'}
placeholderTextColor={'#999'}
labelNumber={6}
value={this.state.formData[item.code]}
type={item.style === 'number'? 'number': ''}
maxLength={10}
onChange={this.setInputValue.bind(this,item)}
editable={this.state.editable}
/>

我们不仅可以修改原有的样式, 还可以添加新的样式,

局限性就是只能在别人定义好的className 中做操作, 并且得去看源码

上面的方法可以自己做个封装, 方便多次使用

import variables from 'antd-mobile/lib/style/themes/default';
import InputItemStyle from 'antd-mobile/lib/input-item/style/index';
import TextareaItemStyle from 'antd-mobile/lib/textarea-item/style/index';

//简单封装
const newStyle = {};   //InputItem
const TextareaStyle = {}; // 大文本
function changeStyle (newObj,style, cssType, cssName,value) {
for (const key in style) {
if (Object.prototype.hasOwnProperty.call(style, key)) {
newObj[key] = { ...StyleSheet.flatten(style[key]) };
if (key === cssType) {
newObj[key][cssName] = value;
}
}
}
}
changeStyle(newStyle,InputItemStyle,'container','borderBottomColor','#fff') // 更改input的下边
changeStyle(newStyle,newStyle,'input','fontSize',16)  // 再次更改input的字体, 所以把上次更改后的样式做为基本样式(style)扔进去
changeStyle(TextareaStyle,TextareaItemStyle,'input','fontSize',16)

ok, 更改结束, 此方法基本就能满足平时样式更改,不仅可以更改原有样式, 还能添加样式.

希望阿杜的这个方法能帮到你, 如果大家有更好的方法欢迎您一定要提出, 谢谢