美文网首页
React Native 学习一

React Native 学习一

作者: Auther丶 | 来源:发表于2016-10-17 12:38 被阅读69次

    官方文档
    http://reactnative.cn/docs/0.31/text.html

    1.初始化项目
    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-ios

    Controllers
    https://github.com/wix/react-native-controllers

    react 调试工具
    utube.com/watch?v=xsSnOQynTHs

    控件或者语法注意点
    1.Text
    Text 相当于是 iOS 的UILabel 而且是RN中唯一可以拥有CSS 继承,层叠 特点的控件。
    而且Text 包裹的控件 拥有flexBox特点,会折行。 其他View Image 等都是block形式,而且 style不能继承,中间不能写文字。

    通过以上两个特点 RN实现一个iOS的富文本,可以这么写

    <Text style={styles.instructions}>
    你好
    <Text style={{color = 'red’}}>
    不是很熟练
    </Text>
    </Text>

    在RN 编译成iOS的时候就会编译成一个Label控件。

    当然 也可以这样写
    <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>

    Text style中的属性
    **color **string
    **fontFamily **string
    **fontSize **number
    **fontStyle **enum('normal', 'italic')
    **fontWeight **enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值。
    **letterSpacing **number
    **lineHeight **number
    **textAlign enum("auto", 'left', 'right', 'center', 'justify')
    指定文本的对齐方式。其中'justify'值仅iOS支持。
    android
    textAlignVertical enum('auto', 'top', 'bottom', 'center')
    ios
    letterSpacing number
    ios
    textDecorationColor **string
    **textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
    ios
    textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
    ios
    writingDirection **enum("auto", 'ltr', 'rtl')

    相关文章

      网友评论

          本文标题:React Native 学习一

          本文链接:https://www.haomeiwen.com/subject/gcyzdttx.html