6,React Native之样式

2017-04-26  本文已影响20人  SYOL

在React Native中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂,我们建议使用StyleSheet.create来集中定义组件的样式。这里我就只用简单介绍TEXT的常见样式用法:

 <Text style={styles.fontStyle}>1,字体样式fontStyle</Text>

使用 const styles = StyleSheet.create

fontStyle: {
    color:'red',
    textAlign:'left',
    fontSize:22,
    fontFamily:'Cochin',
    fontWeight:'bold',
    // 阴影
    // textShadowOffset:{width:3, height:5},
    // 阴影颜色
    // textShadowColor:'black',
    // 字符间距
    letterSpacing:5,
    // 行高
    lineHeight:35,
    // 横线
    textDecorationLine:'none',//'none', 'underline', 'line-through'
    // 横线风格
    textDecorationStyle:'dotted',//'solid', 'double', 'dotted', 'dashed'
    // 线的颜色
    textDecorationColor:'black',
    /***
     * allowFontScaling:控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放
     * adjustsFontSizeToFit:指定字体是否随着给定样式的限制而自动缩放
     * minimumFontScale:当adjustsFontSizeToFit开启时,指定最小的缩放比(即不能低于这个值)。可设定的值为0.01 - 1.0
     * suppressHighlighting:当为true时,如果文本被按下,则没有任何视觉效果。默认情况下,文本被按下时会有一个灰色的、椭圆形的高光
     */
  },

文件回调函数

<Text style={styles.fontStyle} onPress={()=>{alert('onPress')}}>3,当文本发生点击的时候调用该方法</Text>
<Text style={styles.fontStyle} onLongPress={()=>{alert('onLongPress')}}>4,当文本被长按以后调用此回调函数</Text>

本文参考于http://reactnative.cn/docs/0.42/getting-started.html

上一篇下一篇

猜你喜欢

热点阅读