Question

我试图在反应原生

上做这个效果

这是我的代码，但我实际上错过了该行之间的空间。

<Text>
    <Text style={{color: '#fff',  fontWeight: '600', fontSize: 26, backgroundColor: 'blue' }}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </Text>
</Text>

Answer 1

在您的样式中使用lineHeight应该执行您正在寻找的内容：

<Text>
<Text style={{color: '#fff',  fontWeight: '600', fontSize: 26, backgroundColor: 'blue', lineHeight: 20 }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>

Answer 2

我能够使用类似于Travis White建议的解决方案来实现这种效果。 Image of effect in action

这绝不是一个完美的解决方案，我几乎可以肯定有一些我没有处理的用例，但现在它是：

class HighlightText extends Component {
    state = { lines: [] };

    renderLines() {
        let textString = this.props.children;
        // splitOn is integer value. Enter expected max char count per line as prop
        const splitOn = this.props.splitOn;
        // Adds space to end of string, preventing cutoff of last word
        const singleSpace = ' ';
        textString = textString.concat(singleSpace);
        const numOfLines = Math.ceil(textString.length / splitOn);
        let lineStart = 0;
        let lineEnd = textString.slice(0, splitOn).lastIndexOf(' ');
        let fakeLineEnd = lineStart + splitOn;
        /* multiplying x2 to handle for awkward splits before very long words
         that can push content beyond the above calculated numOfLines */
        for (i = 0; i < numOfLines * 2; i++) {
            let line = textString.slice(lineStart, lineEnd);
            // Adds spaces to start and end of already populated lines for visual padding
            if (line.length > 0) {
                line = singleSpace + line + singleSpace;
                this.state.lines.push(line);
            }
            lineStart = lineEnd + 1;
            fakeLineEnd = lineStart + splitOn;
            lineEnd = textString.slice(0, fakeLineEnd).lastIndexOf(' ');
        }
        return this.state.lines.map((line, i) => 
            <View
                key={i}
                style={{
                    marginTop: this.props.marginTop,  
            }}
            >
                <Text>
                    <Text 
                        style={{ 
                            fontSize: this.props.fontSize,
                            color: this.props.color,
                            backgroundColor: this.props.backgroundColor
                        }} 
                    >
                            {line}
                        </Text>
                </Text>
            </View>
        );
    }

    render() {
        return (
            <View>
                {this.renderLines()}
            </View>
        );
    }
}

React Native - 带背景的文本和多行之间的间隙

2 个答案: