react native 样式初学~(一)
标签:
最近看到了一个新技术~~react native~~
貌似国内还很少~~于是我就也来学学~~
这篇一类文章记录我学习react native的过程
安装react native很简单~~貌似网上这个教程还是蛮多的~~
自己去找就好了,如果实在不会留言给我,我再写写装的过程~~
react native的第一个hello world代码很简单~~
贴出如下
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class hellodk extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.titlem}>
测试01!
</Text>
<Text style={styles.instructions}>
这是ios测试
</Text>
<Text style={styles.instructions}>
第一次写react native见谅
</Text>
</View>
);
}
}
// 创建一个样式表
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
titlem: {
fontSize: 20,
textAlign: 'center',
fontWeight: 'bold',//加粗
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('hellodk', () => hellodk);
如上代码中包含了两个组件一个是view,一个是text
首先是view的样式
在这个网址里react native
简单说一下 view可以用里面的那些样式来控制~
text的样式如下~~也是可以用view的一些样式~~写控件的时候可以翻看一下
//text的样式如下
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
textDecorationColor string
writingDirection enum("auto", 'ltr', 'rtl')
如上样式可以配置到样式表中~~
点击查看更多内容
15人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦