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')

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二蛋和他的大花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值