native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈

今天给大家分享的是 RN 聊天室项目，基于 react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术实现高仿微信聊天 APP 界面，从搭建到开发完前前后后发了两周左右吧，多半是晚上挤出时间来弄，开发过程采坑不少，好在 reactNative 社区比较完善，很多困难都在网上找到了解决方法。

使用技术：

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

状态管理：react-redux

页面导航：react-navigation

rn 弹窗组件：rnPop

打包工具：webpack 2.0

轮播组件：react-native-swiper

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

效果预览

{

"name": "RN_ChatRoom",

"aboutMe": "QQ：282310962、wx：xy190310",

"dependencies": {

"react": "16.8.6",

"react-native": "0.60.4"

"devDependencies": {

"@babel/core": "^7.5.5",

"@babel/runtime": "^7.5.5",

"@react-native-community/async-storage": "^1.6.1",

"@react-native-community/eslint-config": "^0.0.5",

"babel-jest": "^24.8.0",

"eslint": "^6.1.0",

"jest": "^24.8.0",

"metro-react-native-babel-preset": "^0.55.0",

"react-native-gesture-handler": "^1.3.0",

"react-native-image-picker": "^1.0.2",

"react-native-swiper": "^1.5.14",

"react-navigation": "^3.11.1",

"react-redux": "^7.1.0",

"react-test-renderer": "16.8.6",

"redux": "^4.0.4",

"redux-thunk": "^2.3.0"

}

ReactNative 实现公共样式

global.GStyle = {

pixel: 1 / PixelRatio.get(),

// 边框

borT: {borderTopWidth: 1 / PixelRatio.get(), borderTopColor: '#dedede',},

borB: {borderBottomWidth: 1 / PixelRatio.get(), borderBottomColor: '#dedede',},

/* __ 布局控制 */

align_l: {textAlign: 'left'},

align_c: {textAlign: 'center'},

align_r: {textAlign: 'right'},

pos_rel: {position: 'relative'},

pos_abs: {position: 'absolute'},

/* __ 颜色(背景、文字) */

bg_fff: {backgroundColor: '#fff'},

bg_45cff5: {backgroundColor: '#45cff5'},

c_fff: {color: '#fff'},

c_999: {color: '#999'},

c_45cff5: {color: '#45cff5'},

/* __ 字号 */

fs_14: {fontSize: 14},

fs_16: {fontSize: 16},

fs_20: {fontSize: 20},

fs_24: {fontSize: 24},

/* __ 字体 */

ff_ic: {fontFamily: 'iconfont'},

ff_ar: {fontFamily: 'arial'},

iconfont: {fontFamily: 'iconfont', fontSize: 16,},

/* __ 间距( 5/10/15/20/25/30/50 ) */

mt_10: {marginTop: 10}, mt_15: {marginTop: 15}, mt_20: {marginTop: 20},

mb_10: {marginBottom: 10}, mb_15: {marginBottom: 15}, mb_20: {marginBottom: 20},

/* __ 行高 */

lh_20: {lineHeight: 20},

lh_25: {lineHeight: 25},

lh_30: {lineHeight: 30},

lh_35: {lineHeight: 35},

lh_40: {lineHeight: 40},

flex1: {flex: 1},

flex2: {flex: 2},

flex_alignC: {alignItems: 'center'},

flex_alignT: {alignItems: 'flex-start'},

flex_alignB: {alignItems: 'flex-end'},

}

react-native 实现全屏幕启动页，可自定义背景图

reactNative 全屏启动页制作(隐藏状态栏，实现沉浸式)

只需把 StatusBar 设置为透明即可，这样状态栏和背景页面一体了。

/**

* @desc 启动页面

import React, { Component } from 'react'

import { StatusBar, Animated, View, Text, Image } from 'react-native'

export default class Splash extends Component{

constructor(props){

super(props)

this.state = {

animFadeIn: new Animated.Value(0),

animFadeOut: new Animated.Value(1),

}

render(){

return (

RN-ChatRoom v1.0.0

)

}

componentDidMount(){

// 判断是否登录

storage.get('hasLogin', (err, object) => {

setTimeout(() => {

Animated.timing(

this.state.animFadeOut, {duration: 300, toValue: 0}

).start(()=>{

// 跳转页面

util.navigationReset(this.props.navigation, (!err && object && object.hasLogin) ? 'Index' : 'Login')

})

}, 1500);

})

}

react-navigation 导航器实现自定义顶部导航条 headerBar 组件

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()

}

reactNative 自定义 modal 弹窗|dialog 对话框

由于 RN 提供的弹窗有时不能满足项目需求，这时就需要自己重新定制弹窗，不过依旧基于 Modal 来实现。

看看下面这个，自己开发的 rnPop 弹窗组件，功能效果还不错~~

支持多种调用方式，具体的可以去看看这篇文章介绍

native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈相关推荐

native聊天界面 react_ReactNative仿微信聊天APP实战项目|RN输入框表情
本帖最后由 xiaoyan2015 于 2019-9-4 13:35 编辑今天给大家分享的是 RN 聊天室项目,基于 react-native+react-navigation+react-redu ...
uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈
一.功能阐述今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...
ReactNative聊天APP实战|仿微信聊天/朋友圈/红包界面
项目简介最近一直在研究RN技术,想着找个项目练练手,之前就有使用vue.react技术开发过聊天项目,这次就使用reactNative技术开发个仿微信RN版.是基于 react-native+rea ...
android仿微信聊天功能,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
php写的微信聊天界面,Android_Android高仿微信聊天界面代码分享，微信聊天现在非常火，是因其 - phpStudy...
Android高仿微信聊天界面代码分享微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先 ...
android 微信高仿,Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...
HTML5仿微信聊天界面、微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...

native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈

native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈相关推荐

最新文章

热门文章