1. 程式人生 > >React Native的TextInput元件去掉下劃線和使用背景圖片

React Native的TextInput元件去掉下劃線和使用背景圖片

      最近做RN,由於先做的是比較簡單的部分,所以沒碰到什麼難點。真正的難點還在後面,所以這周就記錄一下幾個小問題。也是比較常用的小問題了。

一、TextInput元件去掉下劃線和加上邊框

      不得不說,RN自帶的TextInput輸入框是真的醜,不管是樣式還是什麼,所以我們根據美工圖做東西的時候,需要自己來做一些樣式。

1、去掉下劃線

這裡寫圖片描述

如圖所示:
(1)maxLength大家都知道,是限制字數的
(2)underlineColorAdnroid:這是主要就是改變下劃線的透明度。
2、給輸入框加邊框

    borderWidth:1,
    borderColor:'#e8e8e8'
, borderRadius:9,

直接加就好了,順便加了個弧形,更好看一些。

二、背景圖片的問題

      剛開始要加背景圖片的時候,我以為是要在View檢視上加,還是慣性思維害死人啊,實際上RN的Image元件很強大

這裡寫圖片描述

在最外圍來個Image元件,然後新增圖片路徑。在Image元件中寫上我們需要的檢視即可。

三、關於無資料的載入

      加上無資料頁並不難,難的是不知道該在哪裡進行判斷。按理說只是一個if..else的問題,但是還是困擾了我一段時間

這裡寫圖片描述

如圖所示:
1、我們在render渲染檢視的時候,可以在裡面進行一個判斷,當伺服器傳過來的資料為空,即undefined的時候就顯示無資料頁。當有資料的時候,就顯示我們的頁面。
2、return直接輸入我們寫好的頁面就行
3、我們在寫檢視的時候最好是分層次的寫。就像我這樣,維護起來比較好維護一些,一目瞭然。
這裡寫圖片描述

      這裡就是封裝的無資料頁檢視。很簡單,只需要把頁面寫上去就可以了。

      好吧,,很簡單的分享,怪不好意思的,沒什麼乾貨。。

end

相關推薦

React Native的TextInput元件去掉劃線使用背景圖片

      最近做RN,由於先做的是比較簡單的部分,所以沒碰到什麼難點。真正的難點還在後面,所以這周就記錄一下幾個小問題。也是比較常用的小問題了。 一、TextInput元件去掉下劃線和加上邊框       不得不說,RN自帶的TextInput輸入框是真的

如何去掉LinkButton控制元件劃線

<asp:LinkButton id="lbtnAdd" runat="server" style="TEXT-DECORATION: none">沒有下劃線的LinkButton</asp:LinkB

js 去掉劃線,後首個字母變大寫

toupper 駝峰 uri family 大寫 var let upper 字母 1.駝峰轉連字符: var s = "fooStyleCss"; s = s.replace(/([A-Z])/g,"-$1").toLowerCase(); //利用正則進行替

43. fastjson處理劃線駝峰問題的方法源碼分析

fastjson一. 前言在開發過程中經常遇到json解析和生成的問題,所以用自己也一直用fastjson來實現這個功能。但是,最近遇到一個問題: json字符串裏面的數據很多都是"_"下劃線的比如,op_id。而在java裏面,很多都是駝峰的寫法,如opId那這兩種可以匹配然後解析嗎?二. http請求的解

html 中文本去掉劃線

圖片 自己 ges .com logs img 源代碼 src 文本 明顯看出,,網頁中文本的下劃線,怎麽去點呢;先看一下源代碼吧, 明顯看出,有下劃線的文本時超鏈接,我們可以通過 text-drection:"none"; 這個css樣式去掉 博主寫這個是因為自己

python 單劃線劃線

base print 定義 gpo pass erl spa ble ... 1 underline.py 2 __all__ = [‘_underline_variable‘, ‘__underline_variable‘, ‘_underline_func‘,

SearchView去掉劃線

下劃線 tde earch 屬性 div round 搜索 exc exceptio SearchView calSearchView = (SearchView) findViewById(R.id.sv_search_text); if (calSe

python(七) Python中單劃線劃線

www www. 自己 pro improt 分類 鏈接 默認 question Python中單下劃線和雙下劃線: 一、分類 (1)、以單下劃線開頭,表示這是一個保護成員,只有類對象和子類對象自己能訪問到這些變量。 以單下劃線開

js正則表示式驗證字串只包括大小寫字母劃線

背景說明 在之前的開發過程中為了校驗一個欄位只含有大小寫字母,下劃線和-花費了不少力氣才搞定,想著趕快寫一篇部落格來記錄下來,日後開發一定會遇到!! 程式碼實現 首先定義一個變數用來存放驗證字串的正則表示式:var regex=/^[A-Za-z0-9_\-]+$/ig;

Python中單劃線劃線有啥區別

__func__:一種約定,Python內部的名字,用來區別其他使用者自定義的命名,以防衝突。 _func:     一種約定,用來指定私有變數或私有函式(private) __func:   如果類中有一個方法與另外一個類中的一個方法同名了

js劃線駝峰命名轉換

js下劃線和駝峰命名轉換   var s = "style-sheet-base"; var a = s.split("-"); var o = a[0]; for(var i=1;i<a.length;i++){ o = o + a[i].slice(0,1).toUpp

pycharm不顯示一部分劃線刪除線(pep8,typo引起)

如圖:  第一句的波浪線是因為因為了這個模組,而沒有使用的,也就是冗餘引起的,這個最好保留,因為可以提示你哪個模組沒有用到。第二句的下劃線是pep8標準不支援這樣的程式碼格式。如果不讓這個下劃線顯示出來可以依次選擇file--settings--搜尋框輸入pep:

只能輸入英文數字劃線橫線的正則表示式

var reg="^[A-Za-z0-9-_]+$"  ; var regus = new RegExp(regs); regus.test("所要驗證的字串")  true 符合 false 不符合     中英文

Python類中的單劃線劃線的區別

#"單下劃線" 開始的成員變數叫做保護變數,意思是隻有類物件和子類物件自己能訪問到這些變數; #"雙下劃線" 開始的是私有成員,意思是隻有類物件自己能訪問,連子類物件也不能訪問到 #-*-coding:utf8-*- class father(): def __init

JS物件去掉劃線屬性

JS物件去掉下劃線屬性 最近在寫node端,所以遇到資料庫直接返回資料帶下劃線的情況 需要把下劃線屬性換成駝峰屬性 封裝了兩個方法 將下劃線換為駝峰 const replaceUnderLine = (val, char = '_') => {  

python的單劃線劃線

python 類中的單下劃線開頭的變量表示:該方法為類的私有方法,原則上外部不能訪問,但是用._XX是可以訪問到的 雙下劃線開頭則是強制外部不能直接訪問的用.__XX是訪問不到的,它內部其實是將變數名重新命名為:_類名__變數名,所以可以通過._類名__變數名訪問 #_*_coding:utf-8_

react 父子元件之間的通訊函式呼叫

reactjs是一枚新進小鮮肉,跟gulp搭配流行一段時間了。工作或者面試中經常遇到這樣的問題,“子元件如何向父元件傳值?”。其實很簡單,概括起來就是:react中state改變了,元件才會update。父寫好state和處理該state的函式,同時將函式名通過props屬性值的形式傳入子,子呼叫父的函式

href 中 # 與 java_Script:void(0) 的區別(去掉劃線儲存不了,是CSDN的BUG嗎)

<a href="#"> 點選連結後,頁面會向上滾到頁首,# 預設錨點為 #TOP <a href="JavaScript:void(0)" onClick="window.open()"> 點選連結後,頁面不動,只打開連結 <a href=

react-native在windows安裝配置

zhu’yi本次安裝時基於windows7系統,32位,在虛擬機器上面安裝的。 1、安裝JDK,配置環境變數。 下載JDK,然後配置環境變數JAVA_HOME,還是按照正規路徑來,不然編譯時候找不到就尷尬了。 然後將%JAVA_HOME%\bin;%J

自定義View指示器讓指示器劃線文字對齊

指示器的標籤分為兩種情形,一種是固定的一般3~5個標籤,另一種的移動的標籤;開發中經常會使用MD風格的TabLayout控制元件,這個控制元件什麼都很好,就是指示器的下滑線和文字不能夠對齊,這一點用過的同學都會知道的,我也在網上找了好久,也找到不到現成的,只好自