rn 文本样式Text(和css有不同)

心已赠人 2021-07-25 00:06 539阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]代码示例:

import React,{ Component} from 'react'
    import{ 
        View,
        Text,
        StyleSheet
    } from 'react-native'
    
    const App=()=>{ 
        return(
    
            <View style={ style.container}>
                
            <Text style={ style.s}>
    
                <Text style={ style.s1}>
                    jeff
                </Text>
    
                <Text>
                    <Text style={ style.s2}>jeff帅</Text>
                </Text>
    
                <Text>
                    <Text style={ style.s3}>jeff帅帅</Text>
                </Text>
    
                <Text>
                    <Text style={ style.s4}>jeff帅帅帅</Text>
                </Text>
    
                <Text>
                    <Text style={ style.s5}>jeff帅帅帅帅</Text>
                </Text>
            
            </Text>
            </View>
        )
    }
    const style=StyleSheet.create({ 
        container:{ 
            alignItems:'center',
            marginTop:100,
            padding:20
        },
        s1:{ 
            color:'red'
        },
        s2:{ 
            color:'blue',
            fontSize:20
        },
        s3:{ 
            fontWeight:'bold',
            color:'orange'
        },
        s4:{ 
            fontStyle:'italic',
            color:'green'
        },
        s5:{ 
            textShadowColor:'purple',
            textShadowOffset:{ width:2,height:2},
            textShadowRadius:1
        }
    
    })
    
    export default App;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/e047feeebcfe42548716d69041d72e7a.png