React native sohbet ekranı için yardım - R10.net
  • 16-02-2021, 16:15:28
    #1
    Merhabalar, react native ile geliştirdiğim uygulamada, iki kullanıcının aralarında sohbet etmesini sağlayamıyorum, bununla alakalı bilgisi olan yardımcı olabilirse sevinirim.
    Arama ekranından direk chat ekranına geçmesini istiyorum, firebase'te bunu doğru nasıl yazdırabiliriz?

    kodlar :

    chat ekranı :

    import React, { useState, useEffect, useCallback } from 'react'import { GiftedChat } from 'react-native-gifted-chat'import { StyleSheet, TextInput, Text, View, Button, AsyncStorage } from 'react-native'import firebase from 'firebase'


    const db = firebase.firestore()const chatsRef = db.collection('chats')



    function ChatScreen( {route} ) {const [user, setUser] = useState(null)const [messages, setMessages] = useState([])const [userName, setUsername] = useState(null)
    useEffect(() => {readUser()const unsubscribe = chatsRef.doc(firebase.auth().currentUser.uid).collection('messages').onSnapshot((querySnapshot) => {const messagesFirestore = querySnapshot.docChanges().filter(({ type }) => type === 'added').map(({ doc }) => {const message = doc.data()return { ...message, createdAt: message.createdAt.toDate() }}).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())appendMessages(messagesFirestore)})return () => unsubscribe()}, [])
    const appendMessages = useCallback((messages) => {setMessages((previousMessages) => GiftedChat.append(previousMessages, messages))},[messages])
    async function readUser() {const user = await AsyncStorage.getItem('user')if (user) {setUser(JSON.parse(user))}}async function handleSend(messages) {const _id = (firebase.auth().currentUser.uid)const email = (firebase.auth().currentUser.email)const user = {_id, email, userName}await AsyncStorage.setItem('user', JSON.stringify(user))setUser(user)const writes = messages.map((m) => chatsRef.doc(firebase.auth().currentUser.uid).collection('messages').add(m))await Promise.all(writes)}
    return <GiftedChat messages={messages} user={user} onSend={handleSend} placeholder="Mesajınızı giriniz.."/>}
    const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',padding: 30,},input: {height: 50,width: '100%',borderWidth: 1,padding: 15,marginBottom: 20,borderColor: 'gray',},})export default ChatScreen;



    Arama ekranı:

    import React, { useState } from 'react'import { View, Text, TextInput, FlatList, TouchableOpacity } from 'react-native'import { FontAwesome } from '@expo/vector-icons';import firebase from 'firebase';import { Ionicons } from '@expo/vector-icons';
    require('firebase/firestore');
    export default function Timeline(props) {const [users, setUsers] = useState([])
    const fetchUsers = (search) => {firebase.firestore().collection('users').where('name', '>=', search).get().then((snapshot) => {let users = snapshot.docs.map(doc => {const data = doc.data();const id = doc.id;return { id, ...data }});setUsers(users);})}console.log(users);return (<View><View style={{backgroundColor:"white", margin:10, flexDirection:"row", justifyContent:"space-between"}}><TextInput style={{margin:10, borderBottomColor:"black", backgroundColor:"white"}}onChangeText={(search) => fetchUsers(search)}placeholder="Kullanıcı ara.."placeholderTextColor="grey">
    </TextInput><Ionicons style={{margin:10, marginRight:15}} name="ios-search" size={22} color="grey" /></View>
    <FlatListstyle={{marginLeft:12}}numColumns={1}horizontal={false}data={users}showsVerticalScrollIndicator={false}scrrenderItem={({ item }) => (<TouchableOpacityonPress={() => props.navigation.navigate("ChatDetail", {uid: item.id})}><Text style={{margin:12}}>{item.name}</Text></TouchableOpacity>
    )}/></View>)}
R10.net sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.R10.net'i kullanarak çerezleri kullanmamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.