Skip to main content

Bắt đầu

Chúng tôi hỗ trợ tạo ứng dụng bằng cả React Native CLI và Expo CLI.

Cài đặt​

Thiết lập môi trường phát triển​

Phụ thuộc​

Cài đặt gói SDK cần thiết trong dự án React Native của bạn.​

yarn add @communi/chat-react-native

# or

npm install @communi/chat-react-native

Linking​

React Native SDKs của chúng tôi bao gồm cả phụ thuộc bắc cầu Native và được cài đặt cùng với gói @communi/chat-react-native. Tuy nhiên ReactNative không nhận diện được chúng để Auto-Linking. Để giải quyết hãy cập nhật mục phụ thuộc của react-native.config.js như sau:

./react-native.config.js
module.exports = {
  dependencies: {
    '@communi/mqtt-client-react-native': {},
    '@communi/keyboard-area-react-native': {},
  },
};

PiScale Chat SDK yêu cầu một số phụ thuộc ngang hàng cần thiết để tận dụng tất cả các tính năng sẵn có.​

yarn add @react-native-camera-roll/camera-roll @react-native-clipboard/clipboard @react-native-community/netinfo react-native-fs react-native-image-crop-picker react-native-haptic-feedback react-native-svg react-native-date-picker react-native-document-picker react-native-video realm react-native-reanimated react-native-gesture-handler react-native-share

# or

npm install @react-native-camera-roll/camera-roll @react-native-clipboard/clipboard @react-native-community/netinfo react-native-fs react-native-image-crop-picker react-native-haptic-feedback react-native-svg react-native-date-picker react-native-document-picker react-native-video realm react-native-reanimated react-native-gesture-handler react-native-share

R8 / Proguard​

Ghi chú

Nếu cờ minifyEnabled trong dự án Android của bạn được bật hãy thêm các rules sau đây:

./android/app/proguard-rules.pro
-keep class io.realm.react.util.SSLHelper

MQTT​

Trên nền tảng iOS chúng tôi sử dụng thư viện CocoaMQTT với lõi là thư viện MqttCocoaAsyncSocket là một static library vậy nên chúng ta cần cấu hình như sau:

./ios/Podfile
...
target 'ChatApp' do
  ...
  pod "MqttCocoaAsyncSocket", :modular_headers => true
  ...
end
...

Sau đó, chúng ta cập nhật Pod.

npx pod-install ios

Tương thích phiên bản​

piscale-chat-react-nativereact-native (yêu cầu tối thiểu)
1.0.10.72.0
Ghi chú

Chúng tôi khuyến nghị ứng dụng của bạn nên cập nhật phiên bản react-native thường xuyên và tối thiểu ở phiên bản 0.72.0 bởi các sự thay đổi về việc sửa/cập nhật này sẽ mang đến cho người dùng một trải nghiệm tốt hơn ở tính năng Chat.

v0.72.5: Fix null crash when using maintainVisibleContentPosition on Android

v0.72.4: ANR when having an inverted FlatList on android API 33+

v0.72.2: Fix onChangeText not firing when clearing the value of TextInput with multiline=true on iOS

v0.72.0: Add maintainVisibleContentPosition support on Android

Tương thích nền tảng​

  • Chúng tôi chỉ hỗ trợ 2 nền tảng Android và iOS cho React Native SDK.
  • Chúng tôi không hỗ trợ cho Expo Go vì một số gói SDK của chúng tôi có thành phần native.

Cấu hình bổ sung​

Đối với một số phụ thuộc được liệt kê bên dưới, cần có các bước cấu hình bổ sung:

./babel.config.js
  module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };
Ghi chú

Lưu ý các phiên bản react-native đã được react-native-reanimated hỗ trợ. Vui lòng tham khảo: Link

RNGH yêu cầu phải được import ở đầu tệp trước bất kỳ thứ gì khác, đây thường là tệp App.tsx hoặc index.js của bạn.

./index.js
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';

import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Và wrap entry point của bạn bằng <GestureHandlerRootView>

./App.tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView>{/* Your app code goes here */}</GestureHandlerRootView>
  );
}

Runtime Permission​

./android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

Font​

  • Tải và giải nén vào thư mục tương ứng ./assets/fonts
  • Cấu hình

Firebase Cloud Message​