npx react-native doctor
进行环境诊断。npx @react-native-community/cli@latest init MyChatApp --version 0.75.0
cd MyChatApp
npm install @tencentcloud/chat-uikit-react-native react-native-image-picker react-native-document-picker react-native-video
yarn add @tencentcloud/chat-uikit-react-native react-native-image-picker react-native-document-picker react-native-video
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" /><uses-permission android:name="android.permission.READ_MEDIA_AUDIO" /><uses-permission android:name="android.permission.READ_MEDIA_VIDEO" /><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<key>NSCameraUsageDescription</key><string> we would like to use your camera</string><key>NSPhotoLibraryUsageDescription</key><string> we would like to use your photo library</string><key>NSMicrophoneUsageDescription</key><string>we would like to use your microphone</string>
npm install @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack
SDKAppID
、userID
和 userSig
,需在步骤5中获取相关信息后进行替换。import React from 'react';import {View,TouchableOpacity,Text,Image,StyleSheet,} from 'react-native';import { NavigationContainer, useNavigation } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { UIKitProvider } from '@tencentcloud/chat-uikit-react-native';import resources from '@tencentcloud/chat-uikit-react-native/i18n';import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';import { TUILogin } from '@tencentcloud/tui-core';import { ConversationListScreen, ChatScreen } from './Screens';const config = {SDKAppID: 0, // Your SDKAppIDuserID: 'test-1', // Login UserIDuserSig: '', // Your userSig}const LoginScreen = () => {const navigation = useNavigation<any>();// Init localizationTUITranslateService.provideLanguages(resources);TUITranslateService.useI18n('en-US');// Loginconst Login = () => {TUILogin.login({...config,useUploadPlugin: true,framework: 'rn',}).then(() => {navigation.navigate('ConversationList');});};return (<View style={styles.container}><Imagestyle={styles.logo}source={{ uri: 'https://web.sdk.qcloud.com/im/assets/images/tencent_rtc_logo.png' }}/><TouchableOpacity style={styles.buttonContainer} onPress={Login}><Text style={styles.buttonText}>Log in</Text></TouchableOpacity></View>);};const Navigation = () => {const Stack = createNativeStackNavigator();return (<NavigationContainer><Stack.NavigatorscreenOptions={{ headerShown: false }}initialRouteName="Login"><Stack.Screenname="Login"component={LoginScreen}/><Stack.Screenname="ConversationList"component={ConversationListScreen}/><Stack.Screenname="Chat"component={ChatScreen}/></Stack.Navigator></NavigationContainer>);};const App = () => {return (<UIKitProvider><Navigation /></UIKitProvider>);};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#FFFFFF',},logo: {width: 232,height: 80,},buttonContainer: {width: '80%',justifyContent: 'center',alignItems: 'center',paddingVertical: 11,borderRadius: 5,backgroundColor: '#2F80ED',},buttonText: {fontSize: 18,lineHeight: 24,color: '#FFFFFF',},});export default App;
import React from 'react';import { useNavigation } from '@react-navigation/native';import { ConversationList, Chat } from '@tencentcloud/chat-uikit-react-native';export const ConversationListScreen = () => {const navigation = useNavigation<any>();const onPressConversation = () => {navigation.navigate('Chat');};return (<ConversationList onPressConversation={onPressConversation} />);};export const ChatScreen = () => {const navigation = useNavigation<any>();const navigateBack = () => {navigation.goBack();};return (<Chat navigateBack={navigateBack} />);};
Login
中的相关参数 SDKAppID 、userID 以及对应的 userSig :SDKAppID
, 可通过 Chat Console 在 Applications
中获取:userID
Chat
产品入口,单击进入。Users
,进入用户管理页面。Create account
,弹出创建账号信息填写框。如果只是普通成员,我们建议您选择General
类型。userSig
,可使用控制台提供的开发工具实时生成,开发工具请点击 Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator 。npm run android
编译运行项目。npm run android
cd iospod install
cd ../npm run ios
npx react-native doctor
本页内容是否解决了您的问题?