Skip to content

Commit 32aae7f

Browse files
committed
Merge branch 'master' of github.com:reactnativecomponent/react-native-imui
# Conflicts: # README.md
2 parents 6731ace + 3c5f158 commit 32aae7f

18 files changed

+122
-411
lines changed

README.md

Lines changed: 6 additions & 291 deletions
Original file line numberDiff line numberDiff line change
@@ -1,294 +1,9 @@
1-
## IMUI for React Native
1+
# ReactNative IMUI
2+
项目fork自 jpush 的 [Aurora IMUI](https://github.com/jpush/aurora-imui/tree/master/ReactNative)
23

3-
[中文文档](./README_zh.md)
44

5-
## InstallREADME_zh.md
6-
7-
```
8-
npm install react-native-imui --save
9-
react-native link
10-
```
11-
12-
If link Android failed, you need modify `settings.gradle`:
13-
14-
```
15-
include ':react-native-imui'
16-
project(':react-native-imui').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-imui/android')
17-
include ':react-native-imui:chatinput'
18-
include ':react-native-imui:messagelist'
19-
include ':react-native-imui:popuptool'
20-
include ':react-native-imui:emoji'
21-
include ':react-native-imui:photoViewPagerview'
22-
include ':react-native-imui:photoViewPagerview:photodraweeview'
23-
```
24-
25-
And add dependency in your app's `build.gradle`:
26-
27-
```
28-
dependencies {
29-
compile project(':react-native-imui')
30-
}
31-
```
32-
33-
34-
35-
## Configuration
36-
37-
- ### Android
38-
39-
- Add Package:
40-
41-
> MainApplication.java
42-
43-
```
44-
@Override
45-
protected List<ReactPackage> getPackages() {
46-
return Arrays.<ReactPackage>asList(
47-
new MainReactPackage(),
48-
new ReactIMUIPackage()
49-
);
50-
}
51-
```
52-
53-
- import IMUI from 'react-native-imui';
54-
55-
56-
- ### iOS
57-
58-
- PROJECT -> TARGETS -> Build Settings -> Enable Bitcode Set to No
59-
- Find PROJECT -> TARGETS -> General -> Embedded Binaries and add RNTAuroraIMUI.framework
60-
- Before build you project ,you should build RNTAuroraIMUI.framework
61-
62-
## Usage
63-
```
64-
import IMUI from 'react-native-imui';
65-
var MessageList = IMUI.MessageList;
66-
var ChatInput = IMUI.ChatInput;
67-
const AuroraIMUIModule = NativeModules.AuroraIMUIModule;
68-
```
69-
Refer to iOS,Android example
70-
> [iOS Example usage](./sample/index.ios.js)
71-
> [Android Example usage](./sample/react-native-android/pages/chat_activity.js)
72-
## Data format
73-
74-
By using MessageList, you need define `message` object and `fromUser` object.
75-
76-
- message object format:
77-
78-
** status must be one of the four values: "send_succeed", "send_failed", "send_going", "download_failed",
79-
if you haven't define this property, default value is "send_succeed".**
80-
81-
```
82-
message = { // text message
83-
msgId: "msgid",
84-
status: "send_going",
85-
msgType: "text",
86-
isOutgoing: true,
87-
text: "text"
88-
fromUser: {}
89-
}
90-
91-
message = { // image message
92-
msgId: "msgid",
93-
msgType: "image",
94-
isOutGoing: true,
95-
progress: "progress string"
96-
mediaPath: "image path"
97-
fromUser: {}
98-
}
99-
100-
101-
message = { // voice message
102-
msgId: "msgid",
103-
msgType: "voice",
104-
isOutGoing: true,
105-
duration: number
106-
mediaPath: "voice path"
107-
fromUser: {}
108-
}
109-
110-
message = { // video message
111-
msgId: "msgid",
112-
status: "send_failed",
113-
msgType: "video",
114-
isOutGoing: true,
115-
druation: number
116-
mediaPath: "voice path"
117-
fromUser: {}
118-
}
119-
```
120-
121-
- fromUser object format:
122-
123-
```
124-
fromUser = {
125-
userId: ""
126-
displayName: ""
127-
avatarPath: "avatar image path"
128-
}
129-
```
130-
131-
132-
## Event Handling
133-
134-
### MessageList Event
135-
- onAvatarClick {message: {message json}} :Fires when click avatar
136-
137-
- onMsgClick {message: {message json} : Fires when click message bubble
138-
139-
- onStatusViewClick {message: {message json}} Fires when click status view
140-
141-
- onPullToRefresh Fires when pull MessageList to top, example usage: please refer sample's onPullToRefresh method.
142-
143-
144-
- onBeginDragMessageList (iOS only)
145-
146-
### MessageList append/update/insert message event:
147-
148-
For append/update/insert message to MessageList, you will use `MsgListModule`(Native Module) to send event to native.
149-
150-
- appendMessages([message])
151-
152-
example:
153-
154-
```
155-
var messages = [{
156-
msgId: "1",
157-
status: "send_going",
158-
msgType: "text",
159-
text: "Hello world",
160-
isOutgoing: true,
161-
fromUser: {
162-
userId: "1",
163-
displayName: "Ken",
164-
avatarPath: "ironman"
165-
},
166-
timeString: "10:00",
167-
}];
168-
AuroraIMUIModule.appendMessages(messages);
169-
```
170-
171-
- updateMessage(message)
172-
173-
example:
174-
175-
```
176-
var message = {
177-
msgId: "1",
178-
status: "send_going",
179-
msgType: "text",
180-
text: text,
181-
isOutgoing: true,
182-
fromUser: {
183-
userId: "1",
184-
displayName: "Ken",
185-
avatarPath: "ironman"
186-
},
187-
timeString: "10:00",
188-
};
189-
AuroraIMUIModule.updateMessage(message);
190-
```
191-
192-
- insertMessagesToTop([message])
193-
194-
**Notice that the order of message array must be sorted in chronological order**
195-
196-
example:
197-
198-
```
199-
var messages = [{
200-
msgId: "1",
201-
status: "send_succeed",
202-
msgType: "text",
203-
text: "This",
204-
isOutgoing: true,
205-
fromUser: {
206-
userId: "1",
207-
displayName: "Ken",
208-
avatarPath: "ironman"
209-
},
210-
timeString: "10:00",
211-
},{
212-
msgId: "2",
213-
status: "send_succeed",
214-
msgType: "text",
215-
text: "is",
216-
isOutgoing: true,
217-
fromUser: {
218-
userId: "1",
219-
displayName: "Ken",
220-
avatarPath: "ironman"
221-
},
222-
timeString: "10:10",
223-
},{
224-
msgId: "3",
225-
status: "send_succeed",
226-
msgType: "text",
227-
text: "example",
228-
isOutgoing: true,
229-
fromUser: {
230-
userId: "1",
231-
displayName: "Ken",
232-
avatarPath: "ironman"
233-
},
234-
timeString: "10:20",
235-
}];
236-
AuroraIMUIModule.insertMessagesToTop(messages);
237-
```
238-
239-
## Style
240-
241-
### MessageList custom style
242-
243-
**In android, if your want to define your chatting bubble, you need to put a drawable file in drawable folder, and that image file must be [nine patch drawable file](https://developer.android.com/reference/android/graphics/drawable/NinePatchDrawable.html), see our example for detail.**
244-
245-
246-
247-
**In iOS, if your want to define your chatting bubble,you need to put a image file to you xcode,and specifies ` sendBubble.imageName` or `receiveBubble.imageName` to image name. if you need to set the default avatar, you need put you default avatar image to you xcode,and adjust the image name to `defoult_header`,see our example for detail.**
248-
249-
- sendBubble: PropTypes.object :
250-
```
251-
// eg:
252-
{
253-
imageName:"inComing_bubble",
254-
padding:{left:10,top:10,right:15,bottom:10}
255-
}
256-
```
257-
258-
- receiveBubble: PropTypes.object,
259-
260-
- sendBubbleTextColor: PropTypes.string,
261-
262-
- receiveBubbleTextColor: PropTypes.string,
263-
264-
- sendBubbleTextSize: PropTypes.number,
265-
266-
- receiveBubbleTextSize: PropTypes.number,
267-
268-
269-
This Padding object includes four properties: left, top, right, bottom.
270-
```
271-
// eg:
272-
{
273-
left: 5,
274-
top: 5,
275-
right: 15,
276-
bottom: 5
277-
}
278-
```
279-
- sendBubblePadding: PropTypes.object
280-
281-
- receiveBubblePadding: PropTypes.object
282-
283-
- dateTextSize: PropTypes.number,
284-
285-
- dateTextColor: PropTypes.string,
286-
287-
- datePadding: PropTypes.number -- This is a number property, means padding left/top/right/bottom value is same.
288-
289-
Size object include width and height properties.
290-
291-
- avatarSize: PropTypes.object -- Example: avatarSize = {width: 50, height: 50}
292-
293-
- showDisplayName: PropTypes.bool,
5+
## 使用
6+
当前提供的组件:
2947

8+
### React Native
9+
- [AuroraIMUI](./ReactNative/README_zh.md)

README_zh.md

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)