2. 程式人生 > >React Native之Text控制元件屬性和樣式

React Native之Text控制元件屬性和樣式

阿新 • • 發佈：2018-12-10

屬性

numberOfLines

文字行數限制，新增後超過限制行數文字會在末尾預設以…的形式省略。

ellipsizeMode

設定文字縮略格式，配合numberOfLines使用，values： * tail：在末尾…省略（預設值） * clip：在末尾切割，直接切割字元無省略符 * head：在前面…省略 * middle：在中間…省略

onPress

點選事件

style

樣式

樣式

color

字型顏色

fontSize

字型大小

fontFamily

字型

fontStyle 字的樣式

  • normal：正常
  • italic：斜體

fontWeight 設定粗體

  • normal：正常bold：粗體100，200，300， 400， 500， 600， 700， 800， 900）

lineHeight 行高

textAlign 文字對其方式

  • auto：自動對齊
  • left：左對齊
  • right：右對齊
  • center：居中對齊

textDecorationLine 下劃線和刪除線樣式

  • none：無線
  • underline：下劃線
  • line-through：刪除線

相關推薦

React Native之Text控制元件屬性和樣式

屬性 numberOfLines 文字行數限制，新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式，配合numberOfLines使用，values： * tail：在末尾…省略（預設值） * c

React-Native的基本控制元件屬性方法

Text 屬性方法(主要一些可用的屬性) ①.allowFontScaling (bool):控制字型是否根據iOS的設定進行自動縮放-iOS平臺,Android平臺不適用 ②.numberOfLines (number):進行設定Text顯示文字的行數，如果顯示的內容超過

React Native之ScrollView控制元件詳解

概述 ScrollView在Android和ios原生開發中都比較常見，是一個 滾動檢視控制元件。在RN開發中，系統也給我們提供了這麼一個控制元件。不過在RN開發中 ，使用ScrollView必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確

ReactNative View控制元件屬性和樣式

屬性： numberOfLines 文字行數限制，新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式，配合numberOfLines使用，values： * tail：在末尾…省略（預設值） *

ReactNative ListView控制元件屬性和樣式

基本使用方式 //建構函式中繫結資料 constructor(props) { super(props); let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !=

ReactNative Picker控制元件屬性和樣式

屬性 該控制元件可以使用View控制元件的全部屬性 onValueChange function 某一項被選中時執行此回撥。呼叫時帶有如下引數： itemValue: 被選中項的value屬性 itemPosition: 被選中項在picker中的索引位置

ReactNative Image控制元件屬性和樣式

用法 載入本地圖片 <Image source={require('./img/baidu.png')}/> 載入App內資源圖片 <Image source={{uri: 'ic_launcher'}} /> 載入網路圖片 <

ReactNative Touchable控制元件屬性和樣式

TouchableHighlight(高亮觸控) 注：TouchableHighlight只能進行一層巢狀，不能多層巢狀，如果需要多層巢狀就要用View包裝 activeOpacity： 設定元件在進行觸控時候，顯示的不透明度（取值：0 ~ 1） onHideU

React Native 自定義控制元件之驗證碼和Toast

React Native通過近兩年的迭代和維護，最新版本已經到了0.45.1，關於最新版本的介紹請檢視我之前的部落格：0.45新特性。話說回來，儘管迭代的挺快，但還是有很多坑，很多基礎的元件和API還是不完善。 今天給大家帶來的自定義小專題，其實對於React

react native 之 Text 多餘的顯示省略號

當字數太多的時候我們需要省略號來顯示多餘的字，使用Text的屬性 第一個是：(幾行顯示) <Text numberOfLines={1}/> 第二個是：(省略號顯示的位置) 預設的是tail (尾部)  頭部 head 中間 middle

React Native 之Text 在字串中插入影象

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import

[Wondgirl]從零開始學React Native之Text(五)

像不像iOS的富文字 <Text style={{color:'#00F'}}> 我的文字 </Text>

React Native 之 Text居中顯示

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import

React Native 之 Text的使用

前言 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝

react-native自定義控制元件怎麼實現螢幕寬度的80%

原來我們講過在定義PixelRatio後可以獲取螢幕的寬度，程式碼如下： var width = Dimensions.get(‘window’).width; 然後在類CSS樣式中採用:widt

react native實現可展開Text控制元件

原理：元件初始化時不設定Text控制元件的numberOfLines屬性，測量一下元件高度（最大高度），然後在設定numberOfLines屬性，再次測量一下元件高度（最小高度），若最大高度大與最小高度，表示需要顯示“展開”。/* eslint new-cap: ["err

React Native之屬性類型檢查機制詳解 PropType 變成 prop-types

word man div color object platform UC 靜態 ESS 屬性確認的作用 使用 React Native 創建的組件是可以復用的，所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉，常常會忘記使用某些屬性，或者某些屬性傳

React-Native開發八 react-navigation之自定義元件Counter

1 前言 我們知道RN中任何介面元素都可以看成元件，小到一個按鈕，大到一個頁面。RN開發就是不停的開發元件和使用元件，並讓他們協同工作，這樣高效率協同的執行起來，這樣就能完成一個APP的功能了 在實際的開發中，我們經常需要自定義一些滿足我們專案開發的自定義元件，類似於Android

ReactNative Progress(ProgressBarAndroid、ProgressViewIOS)控制元件的屬性和樣式

ProgressBarAndroid 屬性方法 支援View控制元件的屬性方法 從View控制元件中繼承下來， 例如:大小,佈局,邊距 color 設定進度的顏色屬性值 indeterminate 設定

DRF之版本控制、認證和許可權元件

一、版本控制組件 1、為什麼要使用版本控制 首先我們開發專案是有多個版本的當我們專案越來越更新，版本就越來越多，我們不可能新的版本出了，以前舊的版本就不進行維護了像bootstrap有2、3、4版本的，每個版本都有它對應的url，https://v2.bootcss.com/ 、 https://v3.b