最佳答案
非常感谢您的回答,
我不得不用省略号处理文本溢出,而且你提出的方案真的很复杂,所以我使用 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"轻松管理文本溢出。
这是结果:
关于android - React Native - 根据背景颜色更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59552530/