chatgpt 聊天窗口框架聊天框架图片

转载

mob6454cc7b19b2 2024-08-29 12:54:05

文章标签 chatgpt 聊天窗口框架 native聊天界面 react App sed 本地存储 文章分类 深度学习人工智能

一、前言

9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在react native原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。

一、项目简述

基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom，实现了原生app启动页、AsyncStorage本地存储登录拦截、集成rnPop模态框功能(仿微信popupWindow弹窗菜单)、消息触摸列表、发送消息、表情(动图)，图片预览，拍摄图片、发红包、仿微信朋友圈等功能。

二、技术点

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

状态管理：react-redux / redux

页面导航：react-navigation

rn弹窗组件：rnPop

打包工具：webpack 2.0

轮播组件：react-native-swiper

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

{"name": "RN_ChatRoom","version": "0.0.1","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"},"jest": {"preset": "react-native"}

}

◆ App全屏幕启动页splash模板

react-native如何全屏启动？设置StatusBar顶部条背景为透明 translucent={true}，并配合RN动画Animated

/**
* @desc 启动页面*/import React, { Component } from'react'import { StatusBar, Animated, View, Text, Image } from'react-native'exportdefaultclass 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);
})
}
}

◆ RN本地存储技术async-storage

/**
* @desc 本地存储函数*/import AsyncStorage from'@react-native-community/async-storage'exportdefaultclass Storage{
static get(key, callback){return AsyncStorage.getItem(key, (err, object) =>{
callback(err, JSON.parse(object))
})
}
static set(key, data, callback){returnAsyncStorage.setItem(key, JSON.stringify(data), callback)
}
static del(key){returnAsyncStorage.removeItem(key)
}
static clear(){
AsyncStorage.clear()
}
}
global.storage= Storage

声明全局global变量，只需在App.js页面一次引入、多个页面均可调用。

storage.set('hasLogin', { hasLogin: true })
storage.get('hasLogin', (err, object) => { ... })

◆ 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({/**/}
{/*页面*/}
{/*弹窗模板*/}
)
}
}

exportdefault App

◆ react-navigation页面导航器/地址路由、底部tabbar

由于react-navigation官方顶部导航器不能满足需求，如是自己封装了一个，功能效果有些类似微信导航。

export defaultclass 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.propsreturn(
{/*返回*/}{/*标题*/}
{!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()
}
}
//创建底部TabBar
const tabNavigator =createBottomTabNavigator(//tabbar路由(消息、通讯录、我)
{
Index: {
screen: Index,
navigationOptions: ({navigation})=>({
tabBarLabel:'消息',
tabBarIcon: ({focused, tintColor})=>(

12
)
})
},
Contact: {
screen: Contact,
navigationOptions: {
tabBarLabel:'通讯录',
tabBarIcon: ({focused, tintColor})=>(

)
}
},
Ucenter: {
screen: Ucenter,
navigationOptions: {
tabBarLabel:'我',
tabBarIcon: ({focused, tintColor})=>(

)
}
}
},//tabbar配置
{
...
}
)

◆ RN聊天页面功能模块

1、表情处理：原本是想着使用图片表情gif，可是在RN里面textInput文本框不能插入图片，只能通过定义一些特殊字符 :66: (:12 [奋斗] 解析表情，处理起来有些麻烦，而且图片多了影响性能，如是就改用emoj表情符。