添加气泡

Ice-MT · Sep 27, 2016 · 975612a · 975612a
1 parent c213939
commit 975612a
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 12 deletions.
diff --git a/app/component/IMCharShowBg.js b/app/component/IMCharShowBg.js
@@ -0,0 +1,56 @@
+
+
+import React, { Component } from 'react';
+import {
+    View
+} from 'react-native';
+
+import Svg, {
+    Path,
+
+} from 'react-native-svg';
+
+import Const from '../util/const'
+
+
+export default class IMCharShowBg extends Component {
+
+
+    _getPathForLeft = (ww,hh)=>{
+
+        let left ='M'+(ww-4)+' 0 L4 0 Q 0 0 3 3 L 6 6 Q 8 8 8 12  L 8 '+(hh-4)+' Q 8 '+hh+' 12 '+hh+' L '+(ww-4)+' '+hh+' Q'+ww+' '+hh+' '+ww+' '+(hh-4)+' L '+ww+' 4 Q '+ww+' 0 '+(ww-4)+' 0'
+        return left
+    }
+
+
+    _getPathForRight = (ww,hh)=>{
+        let right='M4 0 L'+(ww-4)+' 0 Q '+ww+' 0 '+(ww-3)+' 3 L '+(ww-6)+' 6 Q '+(ww-8)+' 8 '+(ww-8)+' 12 L '+(ww-8)+' '+(hh-4)+' Q '+(ww-8)+' '+hh+' '+(ww-12)+' '+hh+' L 4 '+hh+' Q0 '+hh+' 0 '+(hh-4)+' L 0 4 Q0 0 4 0'
+        return right
+    }
+
+
+    render() {
+
+        const {width,height,isMe} = this.props
+
+        let path = isMe?this._getPathForRight(width,height):this._getPathForLeft(width,height)
+        let color = isMe?Const.color_blue:Const.color_hei_240
+        return (
+            <View
+                style={{position:'absolute',left:0,top:0,width:width,height:height}}
+            >
+                <Svg
+                    height={height}
+                    width={width}
+                >
+                    <Path
+                        fill={color}
+                        d={path}
+                    />
+                </Svg>
+            </View>
+        );
+    }
+}
+
+
diff --git a/app/component/IMChatShow_Message.js b/app/component/IMChatShow_Message.js
@@ -23,7 +23,6 @@ import IMChatShow_Message_Text from './IMChatShow_Message_Text'
 import IMChatShow_Message_Image from './IMChatShow_Message_Image'
 import IMChatShow_Message_Voice from './IMChatShow_Message_Voice'
 
-
 export default class IMChatShow_Message extends Component {
 
     static defaultProps = {
@@ -84,6 +83,7 @@ export default class IMChatShow_Message extends Component {
             case Const.messageText:{
                 return(
                     <IMChatShow_Message_Text
+
                         data = {data}
                         longPress = {(data,message)=>longPress(data,message)}
 

diff --git a/app/component/IMChatShow_Message_Text.js b/app/component/IMChatShow_Message_Text.js
@@ -12,6 +12,7 @@ import {
 
 import Const from '../util/const'
 import System_styles from '../util/system_styles'
+import IMCharShowBg from './IMCharShowBg'
 
 
 export default class IMChatShow_Message_Text extends Component {
@@ -33,6 +34,8 @@ export default class IMChatShow_Message_Text extends Component {
     constructor(props){
         super(props);
         this.state = {
+            bgWidth:0,
+            bgHeight:0,
 
         };
 
@@ -51,27 +54,43 @@ export default class IMChatShow_Message_Text extends Component {
         })
     }
 
+    _onLayout = (event)=>{
+        this.setState({
+            bgHeight: event.nativeEvent.layout.height,
+            bgWidth: event.nativeEvent.layout.width,
+        })
+    }
+
 /*
 * */
     render() {
         const {data}=this.props
-
+        const {bgHeight,bgWidth}=this.state
+
         return (
 
         <TouchableWithoutFeedback
             onLongPress = {this._onLongPress}
+            onLayout={this._onLayout}
+
         >
             <View
-                style={[{justifyContent:'center',paddingHorizontal:5,paddingVertical:8,borderRadius:4,backgroundColor:Const.color_hei_240},data.text.length>19&&{flex:1}
-                ,data.isMe&&{backgroundColor:Const.color_blue,alignItems:'flex-end'}]}
+                style={[{justifyContent:'center',paddingLeft:15,paddingRight:5,paddingVertical:8,borderRadius:4},data.text.length>19&&{flex:1}
+                ,data.isMe&&{alignItems:'flex-end',paddingRight:15,paddingLeft:5}]}
                 ref={component => this._root = component}
 
             >
+                <IMCharShowBg
+                    width = {bgWidth}
+                    height = {bgHeight}
+                    isMe = {data.isMe}
+                />
                 <Text
-                    style={[System_styles.getChanggui(15,Const.color_hei_56),{textAlign:'left',},data.isMe&&{color:'white'}]}
+                    style={[System_styles.getChanggui(15,Const.color_hei_56),{textAlign:'left',backgroundColor:'transparent'},data.isMe&&{color:'white'}]}
                 >
                     {data.text}
                 </Text>
+
             </View>
         </TouchableWithoutFeedback>
 

diff --git a/app/component/IMChatShow_Message_Voice.js b/app/component/IMChatShow_Message_Voice.js
@@ -9,6 +9,7 @@ import {
     TouchableOpacity,
     TouchableNativeFeedback
 } from 'react-native';
+import IMCharShowBg from './IMCharShowBg'
 
 
 import Const from '../util/const'
@@ -34,8 +35,11 @@ export default class IMChatShow_Message_Text extends Component {
         super(props);
         this.state = {
             imageIndex:2,
-            animation:false
+            animation:false,
+            bgWidth:0,
+            bgHeight:0,
         };
+
     }
 
     componentDidMount() {
@@ -106,9 +110,15 @@ export default class IMChatShow_Message_Text extends Component {
         })
     }
 
+    _onLayout = (event)=>{
+        this.setState({
+            bgHeight: event.nativeEvent.layout.height,
+            bgWidth: event.nativeEvent.layout.width,
+        })
+    }
     render() {
         const {data}=this.props
-        const {imageIndex,animation}=this.state
+        const {imageIndex,animation,bgHeight,bgWidth}=this.state
         // let msgdata = JSON.parse(data.messageJson);
         let duration = data.duration
 
@@ -121,7 +131,7 @@ export default class IMChatShow_Message_Text extends Component {
             </Image>
         );
         let timeText = (
-            <Text style={[{color:Const.color_hei_32,marginLeft:4},System_styles.font_changgui_13,data.isMe&&{marginLeft:0,marginRight:4,color:'white'}]}>
+            <Text style={[{color:Const.color_hei_32,marginLeft:4,backgroundColor:'transparent'},System_styles.font_changgui_13,data.isMe&&{marginLeft:0,marginRight:4,color:'white'}]}>
                 {Math.round(duration) + '"秒'}
             </Text>
         );
@@ -130,11 +140,15 @@ export default class IMChatShow_Message_Text extends Component {
         let kk = ww * 29
         let ll =  (Const.screen_width - 32 -50-40-10- kk)/60.0
         let voiceLine = (
-            <View style={[{backgroundColor:Const.color_hei_12,padding:8,paddingTop:8,paddingBottom:8,borderRadius:4,flexDirection:'row',width:kk+duration*ll,alignItems:'center'}
-            ,data.isMe&&{backgroundColor:Const.color_blue,justifyContent:'flex-end'}]}
+            <View style={[{paddingLeft:14,paddingRight:8,paddingTop:8,paddingBottom:8,borderRadius:4,flexDirection:'row',width:kk+duration*ll,alignItems:'center'}
+            ,data.isMe&&{paddingLeft:8,paddingRight:14,justifyContent:'flex-end'}]}
                   ref={component => this._root = component}
-
             >
+                <IMCharShowBg
+                    width = {bgWidth}
+                    height = {bgHeight}
+                    isMe = {data.isMe}
+                />
                 {data.isMe ? timeText : voiceIcon}
                 {data.isMe ? voiceIcon : timeText}
             </View>
@@ -155,8 +169,11 @@ export default class IMChatShow_Message_Text extends Component {
             <TouchableOpacity
                 onPress={this._playVoice}
                 onLongPress = {this._onLongPress}
+                onLayout={this._onLayout}
 
             >
+
+
                 <View style={[{flexDirection:'row'},data.isMe&&{justifyContent:'flex-end'}]}>
                     {voiceLine}
 

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "react": "15.3.2",
     "react-native": "^0.34.0",
-    "react-native-invertible-scroll-view": "^1.0.0"
+    "react-native-invertible-scroll-view": "^1.0.0",
+    "react-native-svg-uri": "0.0.3"
   }
 }
diff --git a/ppp.png b/ppp.png