Question

我有一个自定义组件，它只是一个Text组件，可以接收各种样式的道具。它可以在iOS上完美运行，但在Android上则不会显示该组件的文本。

这是组件的代码：

unsigned char *

然后我在其他组件中像这样使用它：

import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';

export default class TextLabel extends Component {
    render() {
    const colors = {
        red: '#CF243E',
        lightRed: '#E9BBC0',
        white: '#FFFFFF',
        default: '#434A54'
    }

    const weights = {
        bold: 'Raleway-Bold',
        default: 'Raleway-Regular'
    }

    const styles = StyleSheet.create({
        textStyles: {
            fontFamily: this.props.weight ? weights[this.props.weight] : weights.default,
            fontSize: this.props.size ? this.props.size : 16,
            textTransform: this.props.case ? this.props.case : 'none',
            color: this.props.color ? colors[this.props.color] : colors.default
        },
        additionalStyles: this.props.additionalStyles ? this.props.additionalStyles : {}
    })

    return (
        <Text style={[styles.textStyles, styles.additionalStyles]}>

            {this.props.children}

        </Text>
    );
}
}

但是在Android上，它不能呈现文本，而在iOS上，它可以完美地工作。可能会发生什么？

谢谢。

Answer 1

事实证明，这是由于使用了textTransform属性，该属性当前在Android上存在一个错误，如果您以组件的样式设置此属性，该错误会导致文本消失。

目前的解决方案是不使用它，或使用string.toUpperCase（）作为解决方法。

有关此错误的更多信息，请点击此处：https://github.com/facebook/react-native/issues/21966

React Native：自定义文本组件未在Android中呈现（在iOS上运行正常）

1 个答案: