为了使 Text 元素(或 React Native 应用程序中使用的任何其他基本元素)的样式保持一致,我们的团队已经开始为我们的应用程序构建一个与样式指南的样式和命名相匹配的组件库由我们的设计团队打造。
例如,您的文本组件如下所示:
import React, { PropTypes, Component } from 'react';
import ReactNative from 'react-native';
export default class Text extends Component {
getProps() {
const { fontSize, fontWeight } = this.props;
return {
fontSize,
fontWeight,
};
}
render() {
return (
<ReactNative.Text {...this.getProps()}>{this.props.children}</ReactNative.Text>
);
}
}
Text.propTypes = {
fontSize: PropTypes.oneOf([
25,
20,
15,
]),
fontWeight: PropTypes.oneOf([
'normal',
'bold',
]),
};
Text.defaultProps = {
fontSize: 20,
fontWeight: 'normal',
};
以这种方式创建您的文本组件,您可以定义可用的样式,并在开发人员未使用 PropTypes 定义的有效样式时向开发人员发出警告。
我们还希望这个库中的组件能够从您需要它们的任何文件中轻松引用,因此我们为主库文件命名,并带有一些内部 React Native 组件使用的 providesModule 注释。
主库文件看起来像这样。
/**
* @providesModule AppNameLibrary
*/
module.exports = {
get Text() { return require('./Text').default; },
};
然后你只需要将它导入到你需要自定义Text组件的任何组件文件中。
import { Text } from 'AppNameLibrary';
这是一种方法。不确定这是否是最好的方法,但这是我们团队构建组件的好方法,因此它们的设计始终符合我们的样式指南。
至于更改 Android TextInput 组件的文本颜色,只需指定 color: 'orange' 作为样式,我将文本更改为橙色。我们目前使用的是 RN 0.28。