kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 20:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Mimic opacity style of nested Text nodes using alpha color component

Browse Source 
Summary: public

Added opacity property to RCTShadowText, and use it to adjust the alpha
color component of nested text nodes when collapsing the RCTShadowText tree
into an NSAttributedString.  The opacity is propagated down the tree,
multiplying the aggregate with the current node's opacity at each step.  Also,
foreground and background colors are propagated down the tree so that in case
a node has an opacity style but no colors, the ancestor's colors can be used
when adjusting the alpha components.

Reviewed By: nicklockwood

Differential Revision: D2600402

fb-gh-sync-id: 2adb7b598b0a73c984bb2edaab545c02ab911c6b
This commit is contained in:
Josh Berdine
2015-11-04 08:52:46 -08:00
committed by facebook-github-bot-3
parent 70c9ee8b1b
commit 6b9e4ec4b2
4 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
Examples/UIExplorer/TextExample.ios.js
View File

@@ -239,7 +239,77 @@ exports.examples = [
<Text style={{fontSize: 11, color: '#527fe4'}}>
(and tiny inherited bold blue)
</Text>
)
),
</Text>
)
</Text>
<Text style={{backgroundColor:'#ffaaaa'}}>
(opacity 1.0 alpha 1.0 back red)
</Text>
<Text style={{backgroundColor:'#ffaaaa'}}>
(back red
<Text style={{opacity:0.5}}>
(opacity 0.5)
</Text>
)
</Text>
<Text style={{backgroundColor:'#ffaaaa'}}>
(back red
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
(alpha 0.5 back red)
</Text>
)
</Text>
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
(opacity 0.5 back red
<Text style={{opacity:0.5}}>
(opacity 0.5)
</Text>
)
</Text>
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
(alpha 0.5 back red
<Text style={{color:'rgba(0,0,0,0.25)', backgroundColor:'rgba(255,170,170,0.25)'}}>
(alpha 0.25 back red)
</Text>
)
</Text>
<Text style={{opacity:0.5}}>
(opacity 0.5
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
(opacity 0.5 back red)
</Text>
)
</Text>
<Text style={{opacity:0.5}}>
(opacity 0.5
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
(opacity 0.5 back red)
</Text>
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
)
</Text>
<Text style={{opacity:0.5}}>
(opacity 0.5
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
(alpha 0.5 back red)
</Text>
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
)
</Text>
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
(opacity 0.5 back red
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
(alpha 0.5 back red)
</Text>
)
</Text>
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
(opacity 0.5 back red
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(170,170,255,0.5)'}}>
(alpha 0.5 back blue)
</Text>
)
</Text>