美文网首页
第5.60章:自定义Text组件

第5.60章:自定义Text组件

作者: 赵羽珩 | 来源:发表于2019-03-31 19:03 被阅读0次

设定自定义的组件。然后你想让这些文字显示样式的时候,在单独的文件里,去定义这些文字组件,然后倒入你要使用的文件里

image.png
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Ft26_333>
            ninghao.net
        </Ft26_333>
      </View>
    );
  }
}

class Ft26_333 extends Component {
  render() {
    return (
        <Text style={styles.title}>
          {this.props.children}
        </Text>
    )
  }
}

const styles = StyleSheet.create({
  title: {
    fontSize: 26,
    color: '#6435c9',
    textAlign: 'center',// 文字居中
    letterSpacing: 2,// 字与字间的距离
    fontWeight: '900',// 900最粗的文字、100最细的文字
  },
  container: {
    backgroundColor: '#eae7ff',
    flex: 1,
    margin: 50,
    borderWidth: 1,
    borderColor: '#6435c9',
    borderRadius: 16,
  },
});

相关文章

  • 传参

    在table组件里自定义了参数 render Function(text, record, index) {} ...

  • flutter学习(二)结构详解

    本篇主要讲解flutter的目录结构介绍、入口、自定义widget、center组件、text组件、Materia...

  • Ajx 3.0

    1.自定义组件首字母大写,自定义组件标签闭合2.只有label有text属性3.原来ajx2的amap.js.ac...

  • react-native 如何调用子子组件的方法或者属性

    我们在页面的render()方法中,使用了一个组件,可以是系统的如Text或者自定义的组件MyCustomText...

  • 小程序小bug记录

    1、text标签样式无效 自定义组件中css条件渲染class,动态点击切换css样式,同一个text标签重复点击...

  • 第5.60章:自定义Text组件

    设定自定义的组件。然后你想让这些文字显示样式的时候,在单独的文件里,去定义这些文字组件,然后倒入你要使用的文件里

  • 微信小程序-text组件

    Text组件 Text组件用于显示文本, 类似于span标签, 是行内元素 text 组件内只支持 text 嵌套...

  • Android 学习资源

    所有资源来自互联网收集,如有侵权,请告知删除 组件 FontMetrics以及自定义ImageSpan实现Text...

  • ReactNative组件介绍

    ReactNative组件介绍 View组件Text组件TouchableOpacity组件TextInput组件...

  • 开发框架-组件

    开发框架-组件 组件: 媒体组件 地图 开放能力 画布 基础内容:icon text rich-text prog...

网友评论

      本文标题:第5.60章:自定义Text组件

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