|
1 | | -## IMUI for React Native |
| 1 | +# ReactNative IMUI |
| 2 | +项目fork自 jpush 的 [Aurora IMUI](https://github.com/jpush/aurora-imui/tree/master/ReactNative) |
2 | 3 |
|
3 | | -[中文文档](./README_zh.md) |
4 | 4 |
|
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 | +当前提供的组件: |
294 | 7 |
|
| 8 | +### React Native |
| 9 | +- [AuroraIMUI](./ReactNative/README_zh.md) |
0 commit comments