关于前端:修改ReactNative组件的默认属性

作者：iplaycodex
仓库：github、codePen
博客：掘金、segmentfault、知乎、简书、博客园
公众号：FEZONE(大写)
分割我：iplaycodex@163.com
特地申明：原创不易，未经受权不得对此文章进行转载或剽窃，否则按侵权解决，如需转载或开明公众号白名单可分割我，尊重原创尊重知识产权从我做起

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 中组件的默认属性值. 以上只是举例, 依据本人的需要扩大即可. 如果有问题, 请翻看源码.

3. 结束语

❤️ 关注 + 点赞 + 珍藏 + 评论 + 转发 ❤️
原创不易，激励笔者创作更好的文章~