React Native 学习一

2016-10-17  本文已影响69人  Auther丶

官方文档
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')

上一篇下一篇

猜你喜欢

热点阅读