react native 样式初学~(一)

前端之家收集整理的这篇文章主要介绍了react native 样式初学~(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近看到了一个新技术~~react native~~
貌似国内还很少~~于是我就也来学学~~
这篇一类文章记录我学习react native的过程


安装react native很简单~~貌似网上这个教程还是蛮多的~~
自己去找就好了,如果实在不会留言给我,我再写写装的过程~~


react native的第一个hello world代码很简单~~
贴出如下

  1. /** * Sample React Native App * https://github.com/facebook/react-native */
  2. 'use strict';
  3. import React,{
  4. AppRegistry,Component,StyleSheet,Text,View
  5. } from 'react-native';
  6.  
  7. class hellodk extends Component {
  8. render() {
  9. return (
  10. <View style={styles.container}>
  11. <Text style={styles.titlem}>
  12. 测试01!
  13. </Text>
  14. <Text style={styles.instructions}>
  15. 这是ios测试
  16. </Text>
  17. <Text style={styles.instructions}>
  18. 第一次写react native见谅
  19. </Text>
  20. </View>
  21. );
  22. }
  23. }
  24. // 创建一个样式表
  25. const styles = StyleSheet.create({
  26. container: {
  27. flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',borderRadius: 4,borderWidth: 0.5,borderColor: '#d6d7da',},titlem: {
  28. fontSize: 20,textAlign: 'center',fontWeight: 'bold',//加粗
  29. margin: 10,instructions: {
  30. textAlign: 'center',color: '#333333',marginBottom: 5,});
  31.  
  32. AppRegistry.registerComponent('hellodk',() => hellodk);

如上代码中包含了两个组件一个是view,一个是text
首先是view的样式
在这个网址里react native
简单说一下 view可以用里面的那些样式来控制~
text的样式如下~~也是可以用view的一些样式~~写控件的时候可以翻看一下

  1. //text的样式如下
  2. color string
  3. fontFamily string
  4. fontSize number
  5. fontStyle enum('normal','italic')
  6. fontWeight enum("normal",'bold','100','200','300','400','500','600','700','800','900')
  7. letterSpacing number
  8. lineHeight number
  9. textAlign enum("auto",'left','right','center','justify')
  10. textDecorationLine enum("none",'underline','line-through','underline line-through')
  11. textDecorationStyle enum("solid",'double','dotted','dashed')
  12. textDecorationColor string
  13. writingDirection enum("auto",'ltr','rtl')

如上样式可以配置到样式表中~~

猜你在找的React相关文章