native聊天界面 react_ReactNative 聊天 App 实战|RN 仿微信界面群聊|朋友圈

前言

这次要给大家分享的是基于ReactNative开发的聊天APP实战项目RN_ChatRomm，运用react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术进行框架搭建开发，开发期间采坑了不少，不过 ReactNative 社区比较完善，很多问题都在网上找到了解决方案。

技术实现

RN脚手架：react-native + react-native-cli

状态管理：react-redux + redux

页面导航器：react-navigation

RN模态框组件：rnPop.js

打包工具：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"

}

}

RN创建公共样式style

新建style.js公共样式库，通过RN 中提供的global全局变量，在app.js中一次引入，然后所有页面均可以调用。

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'},

}

RN制作全屏APP启动页

reactNative如何实现沉浸式效果，只需把 StatusBar 设置为透明，这样状态栏和背景页面一体了。

export default class Splash extends Component{

constructor(props){

super(props)

this.state = {

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

this.props.navigation.navigate('Index')

})

}, 1500);

})

}

}

RN自定义顶部条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()

}

}

RN自定义Modal弹窗组件(仿微信/ios效果)

项目中用到的弹窗是自己基于Modal开发的自定义弹窗组件|dialog对话框|toast提示，支持多种调用方式，具体的可以去看看这篇文章介绍   https://www.cnblogs.com/xiaoyan2017/p/1129...

static defaultProps = {

isVisible: false, //弹窗显示

title: '', //标题

content: '', //内容

style: null, //自定义弹窗样式 {object}

contentStyle: null, //内容样式

skin: '', //自定义弹窗风格

icon: '', //自定义弹窗图标

shade: true, //遮罩层

shadeClose: true, //点击遮罩层关闭

opacity: '', //遮罩层透明度

time: 0, //弹窗自动关闭秒数

xtime: false, //显示关闭秒数

end: null, //销毁弹窗时回调函数

anim: 'scaleIn', //弹窗动画( scaleIn / fadeIn / top / bottom / left / right )

follow: null, //跟随定位(适用于在长按位置定位弹窗)

position: '', //弹窗位置

btns: null, //弹窗按钮(不设置则不显示按钮)[{...options}, {...options}]

}

RN聊天表情处理

方法一： 通过特殊符处理，[哭泣] (:88 类似这样的，处理起来比较麻烦，而且图片多了会影响页面性能。

方法二： 使用 emoj 表情符，这种方式处理比较简单，网上很多表情符可用，而且不需要特殊处理，性能也还不错。如果要求不高，推荐这种方式。

好了，今天的分享就到这里，希望能给到你们些许帮助~~~

本作品采用《CC 协议》，转载必须注明作者和本文链接

本文为原创文章，未经作者允许不得转载，欢迎大家一起交流 QQ(282310962) wx(xy190310)