demo介绍
这是一个聊天APP
GitHub
https://github.com/abigaleypc/react-native-demo.git
安装项目
git clone https://github.com/abigaleypc/react-native-demo.git
cd demo
npm install
启动项目
进入项目文件夹
demo
–>ios
,- 打开
demo.xcodeproj
, 启动
最终效果
实现过程
页面切换
页面切换通过导航 navigator
切换,该项目由两个页面组成,即 好友列表 和 聊天窗口
在 index.ios.js
中
|
|
以上将导航传给下一个窗口的原因可以参考:新手理解Navigator的教程
FriendsSence
是第一个窗口,即 好友列表,下一个窗口是 ChatSence
,即 聊天窗口。
在 friendSence.js
中,如何跳转至窗口ChatSence
并带上用户的信息呢?
|
|
这样就在堆栈里新增一个窗口,返回的话在这个堆栈去掉目前窗口即可,如下:
|
|
也可以像跳入聊天窗口一样的方法跳入好友列表窗口
列表渲染
列表渲染采用 ListView
,参考
|
|
消息队列
|
|
this.state.inputing
是需要增加的信息this.state.dataSource._dataBlob.s1
是原数据
过程遇到的问题
- 类规范:引入的类名需首字母大写
样式不会继承 所以设置字体大小的话只在header里设置并不会在headerText生效
123<View style={styles.header}><Text style={styles.headerText}>{this.props.title}</Text></View>TouchableHighlight
按钮文字1<TouchableHighlight>文字</TouchableHighlight> //这么写是会报错的
应改为
|
|
用闭包解决
this
读取不到的问题1<TouchableOpacity style={styles.sendBtn} onPress={this.sendMsg()} >
应改为
1
<TouchableOpacity style={styles.sendBtn} onPress={()=>{this.sendMsg()}} >