native聊天界面 react_React Native聊天app实例|RN仿微信朋友圈|RN聊天IM

项目介绍

React-Native聊天实例项目RNChatRoom，基于react-native+react-navigation+react+redux+react-native-image-picker等技术实现的仿微信界面聊天实例。实现了消息发送、textInput文本框插入表情符、表情大图gif、图片选择预览、红包、朋友圈等功能。

用到的知识点：

MVVM框架：react / react-native / react-native-cli

状态管理：react-redux

页面导航：react-navigation

rn弹窗组件：rnPop

打包工具：webpack 2.0

轮播组件：react-native-swiper

图片/相册：react-native-image-picker

app主页面及组件引入

import React, { Fragment, Component } from 'react'

import { StatusBar } from 'react-native'

// 引入公共js

import './src/utils/util'

import './src/utils/storage'

// 导入样式

import './src/assets/css/common'

// 导入rnPop弹窗

import './src/assets/js/rnPop/rnPop.js'

// 引入页面路由

import PageRouter from './src/router'

class App extends Component{

render(){

return (

{/* */}

{/* 页面 */}

{/* 弹窗模板 */}

)

}

}

export default App

基于react-navigation自定义顶部导航

export default class HeaderBar extends Component {

constructor(props){

super(props)

this.state = {

searchInput: ''

}

}

render() {

/**

* 更新

* @param { navigation | 页面导航 }

* @param { title | 标题 }

* @param { center | 标题是否居中 }

* @param { search | 是否显示搜索 }

* @param { headerRight | 右侧Icon按钮 }

*/

let{ navigation, title, bg, center, search, headerRight } = this.props

return (

{/* 返回 */}



{/* 标题 */}

{ !search && center ? : null }

{

search ?

(

{this.setState({searchInput: text})}} style={styles.barSearchText} placeholder='搜索' placeholderTextColor='rgba(255,255,255,.6)' />

)

:

(

{ title ? {title} : null }

)

}

{/* 右侧 */}

{

!headerRight ? null : headerRight.map((item, index) => {

return(

item.press ? item.press(this.state.searchInput) : null}>

{

item.type === 'iconfont' ? item.title : (

typeof item.title === 'string' ?

{`${item.title}`}

:

)

}

{/* 圆点 */}

{ item.badge ? {item.badge} : null }

{ item.badgeDot ? : null }

)

})

}

)

}

goBack = () => {

this.props.navigation.goBack()

}

}

emoj表情符处理

最后附上最近项目实例，欢迎一起学习~~~