修改React-Native组件的默认属性

1. 问题

我们在做网页开发的时候都知道标签有默认样式,例如<ul/>,<li/>等等.所以一般我们在开发项目的时候首先要做的就是先把标签的默认样式给清除掉.例如使用reset.css || normalize.css.但在开发 RN 的时候发现有些组件的默认属性很烦人.同样的需要重写这些默认属性.例如:

<Text /> <TextInput />

这两个组件的有个属性 allowFontScaling=true即:属性默认跟随系统字体大小,超级坑爹.

还有这个组件:

<TouchableOpacity />

这个组件默认点击的时候会有一个阴影效果,因为它的默认透明度是0.2.

这些默认属性有时候会给我们带来很大的困扰,有些组件的属性默认值并不是我们想要的.那么该怎么做呢?在每次使用这个组件的时候手动修改该组件的属性值?

这样做可以满足需求,但是太蠢了.每次使用上述组件的时候都要修改某些属性值.太蠢.这个方法舍弃.

2. 解决之道:

在开发web的时候我们可以修改标签属性的默认值,比较常用的有:reset.css或者normalize.css.那么在开发RN的时候我们可以修改组件的属性的默认值吗?答案是当然可以的啦.通过查看源码发现通过如下修改,即可覆写react-native的原生组件的属性的默认值:

• 新建一个JS文件,代码如下所示:

import { Text, TextInput, TouchableOpacity } from "react-native";
/**
 * 说明:此文件为修改React-native的原生组件的一些默认属性配置
 * 1.修改Text和TextInput的属性,字体大小不跟随系统设置
 * 2.修改TouchableOpacity的默认属性0.2 => 1(即去除该组件默认的按下去的阴影效果 => 点击的时候按下去没有阴影效果)
 */
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
    allowFontScaling: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
    allowFontScaling: false,
});
TouchableOpacity.defaultProps = Object.assign(
    {},
    TouchableOpacity.defaultProps,
    { activeOpacity: 1 }
);

这里修改了 3 个常用组件的默认值

• 2.在RN项目的入口处导入即可.我是在index.js中导入.

// in index.js
import './customComponentsConfig.js';

通过上述操作,即可重写掉react-native中组件的默认属性值.以上只是举例,根据自己的需求扩展即可.如果有问题,请翻看源码.