android - React Native - 根据背景颜色更改文本颜色

Question

我想做如下图所示的事情，但我不知道如何实现(我用谷歌搜索了一下，但我只找到了原生代码 Swift、Obj C 等的结果)。

我是否必须玩一些层或类似的东西？

感谢您的回答!

维克多

Answer 1

非常感谢您的回答，

我不得不用省略号处理文本溢出，而且你提出的方案真的很复杂，所以我使用 maskView 来做到这一点。

我确实喜欢这样:

// container
<View style={{flex:1, borderRadius: 200, height: 25, overflow:hidden}}>

    // Progress bar support
    <View style={{flex:1, backgroundColor: 'gray'}} />

    // Progress bar, I play with "width" to indicate percentage
    <View style={[StyleSheet.absoluteFill, {width: "50%", backgroundColor: 'green'}]} />
    <MaskedView
        style={[StyleSheet.absoluteFill, {justifyContent: 'center'}]}
        maskElement={
            // I define text which will be masked
            <View style={[StyleSheet.absoluteFill, {justifyContent: 'center'}]}>
                <Text
                    style={{marginHorizontal: 15, fontSize: 13}}
                    numberOfLines={1}>
                    Text color change
                </Text>
            </View>
        }>

        // I define a default mask that I apply to the text so that it is 'black' when it is not ON the progress bar.
        <View style={[StyleSheet.absoluteFill,{backgroundColor: 'black'}]} />

        // I define the mask that takes the size of the progress bar and that I apply over the default mask (to overwrite it) so that the text under the mask becomes white.
        <View style={[StyleSheet.absoluteFill,{width:"50%", backgroundColor: '#fff'}]} />
    </MaskedView>
</View>

所以我有我的默认栏指示“最大进度”，我定义了我的进度栏(根据百分比增长或缩小)。然后我用我的文本定义一个 MaskedView 作为 MaskedElement。默认情况下，我在文本上应用了一个黑色 mask ，这样无论发生什么情况它总是黑色的。然后，我用与我的进度条大小完全相同的白色蒙版覆盖这个蒙版。因此，进度条掩码下的所有内容都变成白色，继续我的“深色”进度条，其余部分为黑色!

这样，我可以使用 ellpsizeMode="tail"轻松管理文本溢出。

这是结果: