From f32b8ea022c4a43c333e1e27df21da3aebd0a9ac Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Mon, 21 Jun 2021 16:14:50 +0800 Subject: [PATCH 1/7] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index e709835..a94bf7e 100644 --- a/readme.md +++ b/readme.md @@ -27,7 +27,7 @@ #### 安装 -`npm install git+https://github.com/25juan/react-native-chat-ui.git --save` +`npm install git+https://github.com/HenryHeisenberg/react-native-chat-ui.git --save` #### 使用方法 ``` From a7920d1af1337ae28dc361eb6d02c1354f911da4 Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Mon, 21 Jun 2021 16:52:32 +0800 Subject: [PATCH 2/7] Update InputToolbar.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 取消位置按钮 --- src/components/InputToolbar.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/InputToolbar.js b/src/components/InputToolbar.js index 0fcb52e..8ae0cab 100644 --- a/src/components/InputToolbar.js +++ b/src/components/InputToolbar.js @@ -422,13 +422,14 @@ export default class InputToolbar extends React.Component { 相册 - ),( - - - - - 位置 - + ) +// ,( +// +// +// +// +// 位置 +// ) ]; } From fd69a4da9f85a7bf650b1491520aa9c72d3280a7 Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Mon, 21 Jun 2021 16:53:41 +0800 Subject: [PATCH 3/7] Update InputToolbar.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 取消位置按钮_1 --- src/components/InputToolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InputToolbar.js b/src/components/InputToolbar.js index 8ae0cab..6072a97 100644 --- a/src/components/InputToolbar.js +++ b/src/components/InputToolbar.js @@ -430,7 +430,7 @@ export default class InputToolbar extends React.Component { // // 位置 // - ) +// ) ]; } /** From 9c47d555c478836cc0d714ee89fc8e4125ad97e1 Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Tue, 22 Jun 2021 17:13:16 +0800 Subject: [PATCH 4/7] Update InputToolbar.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复键盘bug --- src/components/InputToolbar.js | 325 +++++++++++++++++---------------- 1 file changed, 164 insertions(+), 161 deletions(-) diff --git a/src/components/InputToolbar.js b/src/components/InputToolbar.js index 6072a97..b0615d0 100644 --- a/src/components/InputToolbar.js +++ b/src/components/InputToolbar.js @@ -13,9 +13,9 @@ import { } from 'react-native'; import Emoji from 'react-native-emoji' import Styles from './Styles/MessageScreenStyle'; -import PropTypes from "prop-types" ; -import spliddit from "../utils/spliddit" ; -import _ from "lodash" ; +import PropTypes from "prop-types"; +import spliddit from "../utils/spliddit"; +import _ from "lodash"; var emojiUtils = require('node-emoji') var emoji = require("./emoji"); const MODE_TEXT = "mode_text"; // 文本输入模式 @@ -49,7 +49,7 @@ export default class InputToolbar extends React.Component { isEmoji: false, value: '', actionVisible: false, - shimVisible:false, // ios软键盘弹出的垫子,只有ios 需要特殊处理 + shimVisible: false, // ios软键盘弹出的垫子,只有ios 需要特殊处理 actionAnim: new Animated.Value(0) }; @@ -57,31 +57,31 @@ export default class InputToolbar extends React.Component { this.actionBarHeight = 0; } - componentWillMount(){ + // componentWillMount(){ + // Platform.OS === "ios" && this.removeKeyboardListener(); + // } + componentWillUnmount() { Platform.OS === "ios" && this.removeKeyboardListener(); } - componentWillUnmount(){ - Platform.OS === "ios" && this.removeKeyboardListener(); - } - componentDidMount(){ + componentDidMount() { Platform.OS === "ios" && this.addKeyboardListener(); } - removeKeyboardListener(){ + removeKeyboardListener() { Keyboard.removeAllListeners("keyboardDidShow"); Keyboard.removeAllListeners("keyboardDidHide"); } - addKeyboardListener(){ - Keyboard.addListener("keyboardDidShow",(e)=>{ - let keyboardHeight = e.startCoordinates.height ; // 获取键盘高度 - this.actionBarHeight = keyboardHeight ; + addKeyboardListener() { + Keyboard.addListener("keyboardDidShow", (e) => { + let keyboardHeight = e.startCoordinates.height; // 获取键盘高度 + this.actionBarHeight = keyboardHeight; this.setState({ - shimVisible:true + shimVisible: true }); }); - Keyboard.addListener("keyboardDidHide",(e)=>{ // 关闭软件盘时重置参数 - this.actionBarHeight = 0 ; + Keyboard.addListener("keyboardDidHide", (e) => { // 关闭软件盘时重置参数 + this.actionBarHeight = 0; this.setState({ - shimVisible:false + shimVisible: false }) }); } @@ -90,16 +90,16 @@ export default class InputToolbar extends React.Component { * 重置关闭表情选择和工具选择 */ dismiss() { - const {isEmoji, actionVisible} = this.state; + const { isEmoji, actionVisible } = this.state; this.setState({ isEmoji: false, actionVisible: false, - },()=>{ + }, () => { }); Animated.timing( this.state.actionAnim, - {toValue: 0} + { toValue: 0 } ).start(); if (isEmoji || actionVisible) { @@ -113,13 +113,13 @@ export default class InputToolbar extends React.Component { * 发送点击事件 */ handleSend() { - if(this.state.value){ // 判断消息是否存在 + if (this.state.value) { // 判断消息是否存在 this.props.onSend(this.state.value); if (this.composerHeight != MIN_COMPOSER_HEIGHT) { this.composerHeight = MIN_COMPOSER_HEIGHT; this.onHeightChange(); } - this.setState({value: ''}); + this.setState({ value: '' }); } } @@ -134,7 +134,7 @@ export default class InputToolbar extends React.Component { } Animated.timing( this.state.actionAnim, - {toValue: 0} + { toValue: 0 } ).start(); this.setState({ actionVisible: false, isEmoji: false }); @@ -144,13 +144,13 @@ export default class InputToolbar extends React.Component { this.search.blur(); } actionVisible = !actionVisible; - this.setState({actionVisible: actionVisible, isEmoji: false}); + this.setState({ actionVisible: actionVisible, isEmoji: false }); if (actionVisible) { this.onHeightChange(); } Animated.timing( this.state.actionAnim, - {toValue: 1} + { toValue: 1 } ).start(); } @@ -180,7 +180,7 @@ export default class InputToolbar extends React.Component { }); Animated.timing( // Uses easing functions this.state.actionAnim, // The value to drive - {toValue: 1} // Configuration + { toValue: 1 } // Configuration ).start(); } @@ -221,7 +221,7 @@ export default class InputToolbar extends React.Component { }); Animated.timing( this.state.actionAnim, - {toValue: 1} + { toValue: 1 } ).start(); } @@ -229,7 +229,7 @@ export default class InputToolbar extends React.Component { * 输入框失去焦点事件 */ handleBlurSearch() { - this.setState({focused: false}); + this.setState({ focused: false }); } /** @@ -238,12 +238,12 @@ export default class InputToolbar extends React.Component { */ handleChangeText(v) { if (v.length > 0 && v[v.length - 1] == '\n') { - this.props.onSend(v.slice(0,v.length - 1)); // 去除\n + this.props.onSend(v.slice(0, v.length - 1)); // 去除\n if (this.composerHeight != MIN_COMPOSER_HEIGHT) { this.composerHeight = MIN_COMPOSER_HEIGHT; this.onHeightChange(); } - this.setState({value: ''}); + this.setState({ value: '' }); } else { this.setState({ value: v, @@ -296,7 +296,7 @@ export default class InputToolbar extends React.Component { * 录音按钮点击事件 */ handleRecordMode() { - const {isEmoji, actionVisible} = this.state; + const { isEmoji, actionVisible } = this.state; if (this.state.mode == MODE_RECORD) { return; } @@ -316,40 +316,40 @@ export default class InputToolbar extends React.Component { if (this.state.mode == MODE_TEXT) { return; } - this.setState({mode: MODE_TEXT, focused: true,}); + this.setState({ mode: MODE_TEXT, focused: true, }); } - renderImoji = (item,index,rowIconNum)=>{ - let emojis = _.chunk(item,rowIconNum) ; - let backspace = "{{backspace}}" ; - emojis.map(row=>{ - if(row.length !== rowIconNum){ - row.push(backspace) ; + renderImoji = (item, index, rowIconNum) => { + let emojis = _.chunk(item, rowIconNum); + let backspace = "{{backspace}}"; + emojis.map(row => { + if (row.length !== rowIconNum) { + row.push(backspace); } - return row ; + return row; }); return ( - + { - emojis.map((rows,index)=>( + emojis.map((rows, index) => ( { - rows.map((item,id)=>{ + rows.map((item, id) => { return ( - item === backspace?( + item === backspace ? ( - + - ):( - item==="{{emtype_str}}"?( - - + ) : ( + item === "{{emtype_str}}" ? ( + + - ):( - { + ) : ( + { this.handleEmojiClick(emojiUtils.get(item)) }}> - + )) ) @@ -366,71 +366,71 @@ export default class InputToolbar extends React.Component { * @private */ _renderEmoji() { - let { renderEmoji } = this.props ; - const {isEmoji, focused} = this.state; + let { renderEmoji } = this.props; + const { isEmoji, focused } = this.state; const emojiStyle = []; - let emojis = renderEmoji(emoji.emojis) ; + let emojis = renderEmoji(emoji.emojis); const rowIconNum = 7; - const pageNum = 20 ; - let pages = Math.ceil(emojis.length/pageNum) ; - for(let start =emojis.length ,end = pages*pageNum; start + emojis = _.chunk(emoji.emojis, pageNum); + return `${index}` } - renderItem={({ item,index })=>this.renderImoji(item,index,rowIconNum)} + keyExtractor={(item, index) => `${index}`} + renderItem={({ item, index }) => this.renderImoji(item, index, rowIconNum)} /> - - - this.handleSend()} - style={{backgroundColor:'#d82614',justifyContent:'center',alignItems:'center',width:55}}> - 发送 + + + this.handleSend()} + style={{ backgroundColor: '#d82614', justifyContent: 'center', alignItems: 'center', width: 55 }}> + 发送 } - _renderTools = ()=>{ - let style= {height:40,width:40}; + _renderTools = () => { + let style = { height: 40, width: 40 }; let itemStyle = { - alignItems:"center", - paddingLeft:10, - paddingRight:10, - paddingTop:5, - paddingBottom:5, - width:100, + alignItems: "center", + paddingLeft: 10, + paddingRight: 10, + paddingTop: 5, + paddingBottom: 5, + width: 100, } return [ ( - + - 拍照 + 拍照 - ),( + ), ( - + - 相册 + 相册 ) -// ,( -// -// -// -// -// 位置 -// -// ) + // ,( + // + // + // + // + // 位置 + // + // ) ]; } /** @@ -439,21 +439,21 @@ export default class InputToolbar extends React.Component { * @private */ _renderActions() { - let { renderTools } = this.props ; - let { shimVisible, actionVisible } = this.state ; // 如果当前是软键盘弹出则添加一个垫子，防止输入框被键盘遮住 - let height = actionVisible?ACTION_BUTTON_HEIGHT:0; - return shimVisible?():( - actionVisible?( - - {renderTools? renderTools(this._renderTools()):this._renderTools() } + let { renderTools } = this.props; + let { shimVisible, actionVisible } = this.state; // 如果当前是软键盘弹出则添加一个垫子，防止输入框被键盘遮住 + let height = actionVisible ? ACTION_BUTTON_HEIGHT : 0; + return shimVisible ? () : ( + actionVisible ? ( + + {renderTools ? renderTools(this._renderTools()) : this._renderTools()} - ):null + ) : null ); } onHeightChange() { var h = this.composerHeight + (MIN_INPUT_TOOLBAR_HEIGHT - MIN_COMPOSER_HEIGHT) + this.actionBarHeight; - if(typeof this.props.onHeightChange === "function"){ + if (typeof this.props.onHeightChange === "function") { this.props.onHeightChange(h); } } @@ -476,19 +476,19 @@ export default class InputToolbar extends React.Component { * @returns {XML} */ renderTextInput() { - const {value = '' } = this.state; + const { value = '' } = this.state; var height = this.composerHeight + (MIN_INPUT_TOOLBAR_HEIGHT - MIN_COMPOSER_HEIGHT); return ( - - - + + + {this.search = search} } - style={[Styles.searchInput, {height: this.composerHeight}]} + ref={(search) => { this.search = search }} + style={[Styles.searchInput, { height: this.composerHeight }]} value={value} autoFocus={this.state.focused} editable={true} @@ -504,8 +504,8 @@ export default class InputToolbar extends React.Component { underlineColorAndroid='transparent' /> - { this._renderEmojiButton() } - { this._renderSendButton() } + {this._renderEmojiButton()} + {this._renderSendButton()} ); } @@ -523,7 +523,7 @@ export default class InputToolbar extends React.Component { onStartShouldSetResponder: (evt) => true, onMoveShouldSetResponder: (evt) => true, onResponderGrant: (evt) => { - this.setState({opacity: "#c9c9c9"}); + this.setState({ opacity: "#c9c9c9" }); this.props.startRecording(); }, onResponderReject: (evt) => { @@ -537,7 +537,7 @@ export default class InputToolbar extends React.Component { } }, onResponderRelease: (evt) => { - this.setState({opacity: "#fff"}); + this.setState({ opacity: "#fff" }); var canceled; if (evt.nativeEvent.locationY < 0 || evt.nativeEvent.pageY < this.recordPageY) { @@ -554,29 +554,30 @@ export default class InputToolbar extends React.Component { }; return ( - - - + + + - + 按住 说话 - { this._renderEmojiButton() } - { this._renderSendButton() } + {this._renderEmojiButton()} + {this._renderSendButton()} ); } @@ -587,16 +588,18 @@ export default class InputToolbar extends React.Component { * @private */ _renderEmojiButton() { - const {isEmoji} = this.state; + const { isEmoji } = this.state; return ( - + { - isEmoji ? - : + isEmoji ? + : } ) @@ -608,56 +611,56 @@ export default class InputToolbar extends React.Component { * @private */ _renderSendButton() { - const {focused, value} = this.state; - return ((focused && value.length > 0) ) ? ( - + const { focused, value } = this.state; + return ((focused && value.length > 0)) ? ( + {'发送'} ) : ( - - + + ); } render() { - const {　isEmoji, mode　} = this.state; + const { isEmoji, mode } = this.state; return ( {mode == MODE_TEXT ? this.renderTextInput() : this.renderReocrdInput()} - + {isEmoji ? this._renderEmoji() : this._renderActions()} ) } } InputToolbar.propTypes = { - startRecording:PropTypes.func.isRequired, - handleImagePicker:PropTypes.func.isRequired, - handleCameraPicker:PropTypes.func.isRequired, - handleLocationClick:PropTypes.func.isRequired, - stopRecording:PropTypes.func.isRequired, - onEndReachedRecording:PropTypes.func.isRequired, // 手指滑动到取消发送的距离的时候 - onReachedRecording:PropTypes.func.isRequired, //手指为滑动到取消发送的距离的时候 - onSend:PropTypes.func.isRequired, // 发送按钮点击发送消息事件 - onHeightChange:PropTypes.func.isRequired, // 输入框的高度发生变化的时候所触发的事件 - renderEmoji:PropTypes.func, + startRecording: PropTypes.func.isRequired, + handleImagePicker: PropTypes.func.isRequired, + handleCameraPicker: PropTypes.func.isRequired, + handleLocationClick: PropTypes.func.isRequired, + stopRecording: PropTypes.func.isRequired, + onEndReachedRecording: PropTypes.func.isRequired, // 手指滑动到取消发送的距离的时候 + onReachedRecording: PropTypes.func.isRequired, //手指为滑动到取消发送的距离的时候 + onSend: PropTypes.func.isRequired, // 发送按钮点击发送消息事件 + onHeightChange: PropTypes.func.isRequired, // 输入框的高度发生变化的时候所触发的事件 + renderEmoji: PropTypes.func, }; InputToolbar.defaultProps = { - handleImagePicker:()=>{}, - handleCameraPicker:()=>{}, - handleLocationClick:()=>{}, - startRecording:()=>{}, - stopRecording:()=>{}, - onEndReachedRecording:()=>{}, // 手指滑动到取消发送的距离的时候 - onReachedRecording:()=>{},//手指为滑动到取消发送的距离的时候 - onSend:()=>{}, - onHeightChange:()=>{}, - renderEmoji:(emojis)=>emojis + handleImagePicker: () => { }, + handleCameraPicker: () => { }, + handleLocationClick: () => { }, + startRecording: () => { }, + stopRecording: () => { }, + onEndReachedRecording: () => { }, // 手指滑动到取消发送的距离的时候 + onReachedRecording: () => { },//手指为滑动到取消发送的距离的时候 + onSend: () => { }, + onHeightChange: () => { }, + renderEmoji: (emojis) => emojis }; From 89d39ae5014c5d919db4621fa788aaed8a887fbf Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Tue, 22 Jun 2021 17:17:24 +0800 Subject: [PATCH 5/7] Update Chat.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复无法滚动的问题 --- src/Chat.js | 282 ++++++++++++++++++++++++++-------------------------- 1 file changed, 142 insertions(+), 140 deletions(-) diff --git a/src/Chat.js b/src/Chat.js index 75a1a3d..d384f58 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -1,204 +1,206 @@ -import React,{ Component } from "react" ; -import { View,StyleSheet } from "react-native" ; +import React, { Component } from "react"; +import { View, StyleSheet, ScrollView } from "react-native"; import MessageList from './components/MessageContainer'; -import MessageInput from "./components/InputToolbar" ; -import RecordMask from "./components/RecordMask" ; -import PropTypes from "prop-types" ; +import MessageInput from "./components/InputToolbar"; +import RecordMask from "./components/RecordMask"; +import PropTypes from "prop-types"; export default class Chat extends Component { state = { - show:false, - text:"", - color:"", + show: false, + text: "", + color: "", }; - startRecording = ()=>{ - this.setState({ show:true, text:"手指上滑, 取消发送", color:"transparent" }); + startRecording = () => { + this.setState({ show: true, text: "手指上滑, 取消发送", color: "transparent" }); this.props.startRecording(); }; - stopRecording = (canceled)=>{ + stopRecording = (canceled) => { this.setState({ - show:false, - text:"", - color:"" + show: false, + text: "", + color: "" }); this.props.stopRecording(canceled); }; - onEndReachedRecording = ()=>{ + onEndReachedRecording = () => { this.setState({ - show:true, - text:"松开手指, 取消发送", - color:"#cf0e0e" + show: true, + text: "松开手指, 取消发送", + color: "#cf0e0e" }); this.props.onEndReachedRecording(); }; - onReachedRecording = ()=>{ + onReachedRecording = () => { this.setState({ - show:true, - text:"手指上滑, 取消发送", - color:"transparent" + show: true, + text: "手指上滑, 取消发送", + color: "transparent" }); this.props.onReachedRecording(); }; - componentDidMount(){ - this.props.onLoad(this.messageList,this.input); + componentDidMount() { + this.props.onLoad(this.messageList, this.input); } - onSend = (text)=>{ - if(text){ + onSend = (text) => { + if (text) { this.props.onSend(text); } }; - onMessagePress = (message)=>{ + onMessagePress = (message) => { this.props.onMessagePress(message); }; - onMessageLongPress = (message)=>{ + onMessageLongPress = (message) => { this.props.onMessageLongPress(message); }; - onFailPress = (message)=>{ + onFailPress = (message) => { this.props.onFailPress(message); }; - onCameraPicker =()=>{ + onCameraPicker = () => { this.props.onImagePicker(); }; - onImagePicker =()=>{ - this.props.onImagePicker(); + onImagePicker = () => { + this.props.onImagePicker(); }; - onLocationClick = ()=>{ + onLocationClick = () => { this.props.onLocationClick(); }; - onPhonePress = (phone)=>{ + onPhonePress = (phone) => { this.props.onPhonePress(phone); }; - onUrlPress = (url)=>{ + onUrlPress = (url) => { this.props.onUrlPress(url); }; - onEmailPress = (email)=>{ + onEmailPress = (email) => { this.props.onEmailPress(email); }; - onMessageListTouch = ()=>{ + onMessageListTouch = () => { this.dismissTools(); this.props.onMessageListTouch(); }; - onScroll(){ + onScroll() { this.props.onScroll(); } - dismissTools(){ - if(this.input){// 当消息列表滚动的时候关闭表情和同居选择面板 + dismissTools() { + if (this.input) {// 当消息列表滚动的时候关闭表情和同居选择面板 this.input.dismiss(); } } - onLoadMoreAsync = (callback)=>{ + onLoadMoreAsync = (callback) => { this.props.onLoadMoreAsync(callback); }; - renderLoadEarlier = ()=>{ }; - onHeightChange = (height)=>{ this.props.onHeightChange(height); }; + renderLoadEarlier = () => { }; + onHeightChange = (height) => { this.props.onHeightChange(height); }; render() { - let { style={ } } = this.props ; + let { style = {} } = this.props; return ( - - this.messageList = messageList } - onMessagePress={this.onMessagePress} - onFailPress = { this.onFailPress } - onMessageLongPress={this.onMessageLongPress} - onScroll={()=>this.onScroll()} - onMessageListTouch={this.onMessageListTouch} - isShowOutgoingDisplayName={true} - canLoadMore={ this.props.canLoadMore } - onPhonePress={this.onPhonePress} - onUrlPress = { this.onUrlPress } - onEmailPress = { this.onEmailPress }/> + + + this.messageList = messageList} + onMessagePress={this.onMessagePress} + onFailPress={this.onFailPress} + onMessageLongPress={this.onMessageLongPress} + onScroll={() => this.onScroll()} + onMessageListTouch={this.onMessageListTouch} + isShowOutgoingDisplayName={true} + canLoadMore={this.props.canLoadMore} + onPhonePress={this.onPhonePress} + onUrlPress={this.onUrlPress} + onEmailPress={this.onEmailPress} /> + - this.input = input} - onSend={ this.onSend }/> - + this.input = input} + onSend={this.onSend} /> + ); } } Chat.propTypes = { - containerStyle:PropTypes.object, - wrapperStyle:PropTypes.object, - textStyle:PropTypes.object, - earlierTextStyle:PropTypes.object, - earlierContainerStyle:PropTypes.object, - earlierWrapperStyle:PropTypes.object, - isLoadingEarlier:PropTypes.bool, - canLoadMore:PropTypes.bool, - startRecording:PropTypes.func, - stopRecording:PropTypes.func, - onEndReachedRecording:PropTypes.func, - onReachedRecording:PropTypes.func, - onSend:PropTypes.func, - onFailPress:PropTypes.func, - onMessagePress:PropTypes.func, - onMessageLongPress:PropTypes.func, - onImagePicker:PropTypes.func, - onCameraPicker:PropTypes.func, - onLocationClick:PropTypes.func, - onPhonePress:PropTypes.func, - onUrlPress:PropTypes.func, - onEmailPress:PropTypes.func, - onMessageListTouch:PropTypes.func, - onScroll:PropTypes.func, - onLoadMoreAsync:PropTypes.func, - renderLoadEarlier:PropTypes.func, - onLoad :PropTypes.func, - onHeightChange:PropTypes.func, - onAvatarPress:PropTypes.func, - renderEmoji:PropTypes.func, + containerStyle: PropTypes.object, + wrapperStyle: PropTypes.object, + textStyle: PropTypes.object, + earlierTextStyle: PropTypes.object, + earlierContainerStyle: PropTypes.object, + earlierWrapperStyle: PropTypes.object, + isLoadingEarlier: PropTypes.bool, + canLoadMore: PropTypes.bool, + startRecording: PropTypes.func, + stopRecording: PropTypes.func, + onEndReachedRecording: PropTypes.func, + onReachedRecording: PropTypes.func, + onSend: PropTypes.func, + onFailPress: PropTypes.func, + onMessagePress: PropTypes.func, + onMessageLongPress: PropTypes.func, + onImagePicker: PropTypes.func, + onCameraPicker: PropTypes.func, + onLocationClick: PropTypes.func, + onPhonePress: PropTypes.func, + onUrlPress: PropTypes.func, + onEmailPress: PropTypes.func, + onMessageListTouch: PropTypes.func, + onScroll: PropTypes.func, + onLoadMoreAsync: PropTypes.func, + renderLoadEarlier: PropTypes.func, + onLoad: PropTypes.func, + onHeightChange: PropTypes.func, + onAvatarPress: PropTypes.func, + renderEmoji: PropTypes.func, }; Chat.defaultProps = { - containerStyle:{left:{ },right:{ }}, - wrapperStyle:{left:{ },right:{ }}, - textStyle:{ left:{ },right:{ } }, - earlierTextStyle:{ }, - earlierContainerStyle:{ }, - earlierWrapperStyle:{ }, - isLoadingEarlier:false , - canLoadMore:true, - startRecording:()=>{ }, - stopRecording:PropTypes.func, - onEndReachedRecording:()=>{ }, - onReachedRecording:()=>{ }, - onSend:()=>{ }, - onMessagePress:()=>{ }, - onMessageLongPress:()=>{ }, - onImagePicker:()=>{ }, - onCameraPicker:()=>{ }, - onLocationClick:()=>{ }, - onPhonePress:()=>{ }, - onUrlPress:()=>{ }, - onEmailPress:()=>{ }, - onMessageListTouch:()=>{ }, - onScroll:()=>{ }, - onLoadMoreAsync:(callback)=>{ callback() }, - renderLoadEarlier:()=>{ }, - onFailPress:()=>{ }, - onLoad:()=>{ }, - onHeightChange:()=>{ }, - onAvatarPress:()=>{ }, + containerStyle: { left: {}, right: {} }, + wrapperStyle: { left: {}, right: {} }, + textStyle: { left: {}, right: {} }, + earlierTextStyle: {}, + earlierContainerStyle: {}, + earlierWrapperStyle: {}, + isLoadingEarlier: false, + canLoadMore: true, + startRecording: () => { }, + stopRecording: PropTypes.func, + onEndReachedRecording: () => { }, + onReachedRecording: () => { }, + onSend: () => { }, + onMessagePress: () => { }, + onMessageLongPress: () => { }, + onImagePicker: () => { }, + onCameraPicker: () => { }, + onLocationClick: () => { }, + onPhonePress: () => { }, + onUrlPress: () => { }, + onEmailPress: () => { }, + onMessageListTouch: () => { }, + onScroll: () => { }, + onLoadMoreAsync: (callback) => { callback() }, + renderLoadEarlier: () => { }, + onFailPress: () => { }, + onLoad: () => { }, + onHeightChange: () => { }, + onAvatarPress: () => { }, }; const styles = StyleSheet.create({ From ccc92c7fe663ccb2ba2e774f65b6e8e8191e7c82 Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Tue, 22 Jun 2021 17:21:35 +0800 Subject: [PATCH 6/7] Update LoadEarlier.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复点击历史消息后不消失问题 --- src/components/LoadEarlier.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/LoadEarlier.js b/src/components/LoadEarlier.js index 77a6915..629495c 100644 --- a/src/components/LoadEarlier.js +++ b/src/components/LoadEarlier.js @@ -9,6 +9,12 @@ import { } from 'react-native'; import PropTypes from 'prop-types'; export default class LoadEarlier extends React.Component { + constructor(props) { + super(props) + this.state = { + show: 'flex' + } + } renderLoading() { if (this.props.isLoadingEarlier === false) { return ( @@ -20,8 +26,8 @@ export default class LoadEarlier extends React.Component { return ( + opacity: 0, + }]}> {this.props.label} { if (this.props.onLoadMoreAsync) { this.props.onLoadMoreAsync(); + this.setState({ + show: 'none' + }) } }} disabled={this.props.isLoadingEarlier === true} @@ -80,12 +89,12 @@ const styles = StyleSheet.create({ }); LoadEarlier.defaultProps = { - onLoadEarlier: () => {}, + onLoadEarlier: () => { }, isLoadingEarlier: false, label: '查看历史消息', - earlierContainerStyle: {}, + earlierContainerStyle: {}, earlierWrapperStyle: {}, - earlierTextStyle: {}, + earlierTextStyle: {}, activityIndicatorStyle: {}, }; From 73ea68c98034d9cd423a5809e4f839a6d6a5c7dd Mon Sep 17 00:00:00 2001 From: Cat's Schroedinger <36580689+HenryHeisenberg@users.noreply.github.com> Date: Tue, 22 Jun 2021 17:49:05 +0800 Subject: [PATCH 7/7] Update InputToolbar.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 彻底修复键盘报错的bug --- src/components/InputToolbar.js | 37 +++++++++++++++++++++------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/src/components/InputToolbar.js b/src/components/InputToolbar.js index b0615d0..b8cc38f 100644 --- a/src/components/InputToolbar.js +++ b/src/components/InputToolbar.js @@ -61,7 +61,13 @@ export default class InputToolbar extends React.Component { // Platform.OS === "ios" && this.removeKeyboardListener(); // } componentWillUnmount() { - Platform.OS === "ios" && this.removeKeyboardListener(); + if (Platform.OS === "ios") { + let keyboardDidHide = Keyboard.listenerCount("keyboardDidHide"); + let keyboardDidShow = Keyboard.listenerCount("keyboardDidShow"); + if (keyboardDidHide > 0 || keyboardDidShow > 0) { + this.removeKeyboardListener() + } + } } componentDidMount() { Platform.OS === "ios" && this.addKeyboardListener(); @@ -340,18 +346,21 @@ export default class InputToolbar extends React.Component { - ) : ( - item === "{{emtype_str}}" ? ( - - - - ) : ( - { - this.handleEmojiClick(emojiUtils.get(item)) - }}> - - - )) + ) + : ( + item === "{{emtype_str}}" ? ( + + + + ) + : ( + { + this.handleEmojiClick(emojiUtils.get(item)) + }}> + + + ) + ) ) }) } @@ -504,7 +513,7 @@ export default class InputToolbar extends React.Component { underlineColorAndroid='transparent' /> - {this._renderEmojiButton()} + {/* {this._renderEmojiButton()} */} {this._renderSendButton()} );