Question

有没有人知道更改Text组件的默认文本颜色的好方法？

这是我将其包装在MyText组件中的尝试。

import styles from 'somewhere';  // import default color

function MyText(props) {
  return (
    <Text
      style={[styles.default, props.style]}
      allowFontScaling={props.allowFontScaling}
      numberOfLines={props.numberOfLines}
      onLayout={props.onLayout}
      onLongPress={props.onLongPress}
      onPress={props.onPress}
      suppressHighlighting={props.suppressHighlighting}
      testID={props.testID}
    >
      {props.children}
    </Text>
  );
}

MyText.propTypes = {
  allowFontScaling: PropTypes.bool,
  children: PropTypes.any,
  numberOfLines: PropTypes.number,
  onLayout: PropTypes.func,
  onLongPress: PropTypes.func,
  onPress: PropTypes.func,
  style: PropTypes.object,
  suppressHighlighting: PropTypes.bool,
  testID: PropTypes.string,
};

Answer 1

解决

function MyText({
  children,
  style,
  ...props
}) {
  return (
    <Text
      {...props}
      style={[styles.default, style]}
    >
      {children}
    </Text>
  );
}

Answer 2

你可以用Glamorous Native更干净简单地做到这一点：

import glamorous from "glamorous-native";

const MyText = glamorous.text({ ...styles });

<MyText>
  ...
</MyText

Answer 3

您也可以像这样使用 .defaultProps 道具，我已经将我的道具放在了我的 app.js 根目录中，因为我所有组件文本的默认颜色都是白色。您也可以在 TextInput 组件上执行此操作。在 RN-0.63 上测试


    import { Text, TextInput } from 'react-native'
    
    
    export default MyApp() {

     Text.defaultProps.style = {color: 'white'}
     TextInput.defaultProps.style = {color: 'blue'}

     return (
        <Text>My color is White</Text>
        <Text>My color is White too</Text>
        <TextInput>My color is Blue</TextInput>
     )
    
    }

为Text组件添加默认颜色的更好方法是什么？

3 个答案: