REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

Posted 2022-05-28 李华明Himi

本站文章均为  李华明Himi  原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2346.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2346.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

补充说明：

一：很多童鞋问，键盘调出来被挡住了，那么下面给出三个解决方案：

1. 在render最外层包一个ScrollView，然后当键盘调出时，scrollTo即可实现。

2. 在底部添加一个可变化高度的view，根据键盘获取、失去焦点时，进行处理实现

3. 使用插件：react-native-keyboard-spacer ：https://github.com/Andr3wHur5t/react-native-keyboard-spacer

二：有的童鞋说对话框的背景没有根据内容长短自适应，OK ，下面给出自动适应的样式与修改：

先看效果图：

1. 导入一个组件：Dimensions

2. 我们先将 renderEveryData 的函数改为如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

renderEveryData ( eData )        var sWidth = Dimensions . get ( 'window' ) . width    return (    < View style = eData . isMe == true ? styles . everyRowRight : styles . everyRow >            < Image              source = 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 >                < Text style = eData . isMe == true ? styles . talkTextRight : styles . talkText >                   eData . talkContent                < / Text >      < / View >            < / View >            < Image              source = eData . isMe == true ? require ( './res/headIcon/ox2.png' ) : null              style = eData . isMe == true ? styles . talkImgRight : REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十真机运行报错COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解决方法 REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！