1. 程式人生 > >【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

補充說明:

一:很多童鞋問,鍵盤調出來被擋住了,那麼下面給出三個解決方案:

1. 在render最外層包一個ScrollView,然後當鍵盤調出時,scrollTo即可實現。

2. 在底部新增一個可變化高度的view,根據鍵盤獲取、失去焦點時,進行處理實現

二:有的童鞋說對話方塊的背景沒有根據內容長短自適應,OK ,下面給出自動適應的樣式與修改:

先看效果圖:

11221

1. 匯入一個元件:Dimensions

2. 我們先將 renderEveryData 的函式改為如下:

12345678910111213141516171819202122renderEveryData(eData){varsWidth=Dimensions
.get('window').widthreturn(<View style={eData.isMe==true?styles.everyRowRight:styles.everyRow}><Imagesource={eData.isMe==true?null:require('./res/headIcon/ox1.png')}style={eData.isMe==true?null:styles.talkImg}/><View style={{width:sWidth-100}}><View style={eData.isMe==true?styles.talkViewRight
:styles.talkView}><Textstyle={eData.isMe==true?styles.talkTextRight:styles.talkText}>{eData.talkContent}</Text></View></View><Imagesource={eData.isMe==true?require('./res/headIcon/ox2.png'):null}style={eData.isMe==true?styles.talkImgRight:null}

相關推薦

REACT NATIVE 系列教程十三利用LISTVIEWTEXTINPUT製作聊天/對話方塊&&獲取元件例項常用方式

補充說明:一:很多童鞋問,鍵盤調出來被擋住了,那麼下面給出三個解決方案:1. 在render最外層包一個ScrollView,然後當鍵盤調出時,scrollTo即可實現。2. 在底部新增一個可變化高度的view,根據鍵盤獲取、失去焦點時,進行處理實現二:有的童鞋說對話方塊的背景沒有根據內容長短自適應,OK ,

REACT NATIVE 系列教程真機執行報錯COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解決方法

Himi最近在真機執行遇到  Command /bin/sh failed with exit code 1  的錯誤, 模擬器執行沒有任何問題。此問題已解決,這裡分享下解決方案。先來看下錯誤日誌,如下圖:主要是劃線的部分:1.PhaseScriptExecution Bundle\ React\ Nativ

REACT NATIVE 系列教程重新整理元件RENDER(重新渲染)的三方式詳解

開發過遊戲的都應該很清楚,“刷屏”是多麼的重要。其實開發應用也如此,當元件的資料被修改後,如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式:this.setState()  【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt

REACT NATIVE 系列教程REACT NATIVE版本升級步驟注意事項!

       由於React Native處於快速迭代發展中,因此元件功能的擴充套件、語法的變更也將會有較大的區別,因此升級版本則屬於務必掌握的了。昨天Himi剛從0.23版本升級到0.26,升級的主要原因有兩點:1. 一些元件在最新版本中加入了很多新的屬性,例如0.23版本中Modal動畫沒有最新的屬性:a

REACT NATIVE 系列教程NAVIGATOR(頁面導航)的基本使用傳參

今天介紹一種應用開發中常用的負責頁面切換及導航功能的元件:Navigator一:Navigator對於頁面導航其實主要功能就是:每個頁面都知道本身應該切換到哪個頁面,並且切到的頁面會記錄從哪裡來,如果要返回的話,知道返回到哪個頁面。這一切都不需要再用邏輯管理!而且每個頁面之間也可以進行引數傳遞,很方便的元件。

REACT NATIVE 系列教程十一外掛的安裝、使用更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

本篇主要來詳細介紹如何安裝、升級外掛及講解一個react-native-tab-navigator的示例。本文舉例使用的外掛:react-native-tab-navigator ,選項卡形式的導航1. 通過  https://www.npmjs.com 找到我們想使用的外掛, 搜尋:react-native

React Native系列教程構建React Native官方Examples

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72835364) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

React Native系列教程Mac(OSX)平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

React Native系列教程Windows平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

REACT NATIVE 系列教程之一觸控事件的形式TOUCHABLE元件詳解

本文是RN(React Native)系列教程第一篇,當然也要給自己的群做個廣告:  React Native @Himi :126100395  剛建立的群,歡迎一起學習、討論、進步。本文主要講解兩點:1.   PanResponder:觸控事件,用以獲取使用者手指所在螢幕的座標(x,y)或觸發、或滑動、或

React全家桶入門十三Redux中介軟體非同步action

在上一篇中我們瞭解到,更新Redux中狀態的流程是這樣的:action -> reducer -> new state。 文中也講到,action是一個普通的javascript物件、reducer是一個普通的方法,在reducer中根據當前的st

React全家桶入門登錄身份認證

cto json head AC push 操作 undefine 防盜 項目依賴 細致想想。我們的後臺系統還沒有一個登錄功能,太不靠譜,趕緊把防盜門安上! SPA

React全家桶入門使用者編輯刪除

前文中實現了使用者新增與使用者列表展示的功能,本篇帶大家來完成使用者的編輯與刪除。 新增操作列 編輯與刪除功能都是針對已存在的某一個使用者執行的操作,所以在使用者列表中需要再加一個“操作”列來展現【編輯】與【刪除】這兩個按鈕。 修改/src/pages/U

Docker系列教程如何構建Dockerfile

在上一篇文章中,我們講述了 Dockerfile 的組成以及指令的編寫過程,在本篇文章中詳細講解如何構建 Dockerfile 。 Dockerfile常用的指令 那麼在講如何構建 Dockerfile 之前,我們回顧一下上一篇的編寫過程:

Docker系列教程如何將自制的漏洞環境打包成映象進行共享

我在之前的文章中只是說過,利用 Dockerfile 去拉去映象,而這些映象的拉取都是從 Docker Hub 上拉取下來,而現在我有個想法,我製作好了一個漏洞環境整合的映象,我又該如何進行開源共享,提供給別人使用呢?這就是我們今天的主題了。 首先我們得準備一個 Docker Hub 的帳號, Docker

Docker系列教程Dockerfile入門

在上一篇的文章中,我們把 Docker 容器的工作流程剖析的十分清楚了,我們大體可以知道 Docker 元件協作執行容器可以分為以下幾個過程: Docker 客戶端執行 docker run 命令 Dockerdaemon

Docker系列教程Docker容器是如何工作的

在上一篇的文章中,我給大家主要介紹了一下 Docker 環境的搭建,簡單的講解了一下 Docker 架構,以及用 Docker 命令簡單演示了一下如何拉去一個 images 映象。本篇我們將剖析一下 Docker&nbs

React全家桶入門加入表單驗證

我們的現在可以在應用裡新增使用者了。但是還存在不小的問題: 使用者可以輸入任意長的名字 使用者可以輸入任意的年齡 使用者可以不選擇性別 盲目信任使用者輸入的資料,會給系統埋下不小的隱患。這回我們就來把這隱患扼殺在搖籃之中。 表單驗證無非就是對使用者輸入

OPNET學習系列文章2個固定節點通訊

九步入門OPNET程式設計 1.新建一個專案 在選單欄依次點選File-New,選擇Project,然後點選OK進入Entername頁面,分別輸入Project Name和Scenario N

React全家桶入門登入身份認證

仔細想想,我們的後臺系統還沒有一個登入功能,太不靠譜,趕緊把防盜門安上! SPA的鑑權方式和傳統的web應用不同:由於頁面的渲染不再依賴服務端,與服務端的互動都通過介面來完成,而REASTful風格的介面提倡無狀態(state less),通常不使用cooki