需要添加头像和用户名才能发布

编程问答 2022-08-22

问题描述

因此，我正在尝试将用户头像和用户名添加到我的addPost中。我已经尝试了所有可以想到的方法，但是没有任何效果。

我已经尝试过了

firebase.auth().currentUser.avatar;

但这不起作用，我认为这是因为“头像”或“用户名”不是auth的Firebase特定属性。

我也尝试过； 

get uid() {
    return firebase.auth().currentUser;
}

然后添加到addPost 

avatar: this.uid.avatar,username: this.uid.username

那也不行。

我只需要在主屏幕上调用时提供用户头像和用户名即可。


import React from "react";
import { View,StyleSheet,FlatList,Platform,TouchableNativeFeedback,TouchableOpacity,Image,Button } from "react-native";
import Fire from '../../Fire';
import UsernameText from '../../components/Text/DefaultUsernameText';
import CreatedAtText from '../../components/Text/CreatedAtText';
import ThoughtTitleText from '../../components/Text/DefaultThoughtTitle';
import Colors from  '../../constants/Colors';
import moment from 'moment';

 let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
    TouchableCmp = TouchableNativeFeedback;
}


export default class HomeScreen extends React.Component {
    
 state = {
   latestPost: [],}

displayLatestPost = (latestPost) => {
    this.setState({latestPost: latestPost});
    console.log("latest Post " + this.state.latestPost);
}

componentDidMount(){
   Fire.shared.getPosts(this.displayLatestPost);
   console.log("This is the displayLatestPost " + this.state.latestPost);
   
}



  
renderLatestPost = (post) => {
    return (
        <View>

        <TouchableCmp onPress={() => {}} style={{flex: 1}}>
        <View style={styles.container}>
            <View style={styles.infoText}>

            <Image style={styles.userAvatar}>{post.avatar}</Image>
                <UsernameText style={styles.name} >{post.username}</UsernameText>
    <CreatedAtText style={styles.timestamp}>{moment(post.timestamp).fromNow()}</CreatedAtText>
            </View>
            <View style={styles.container} >
    <ThoughtTitleText style={styles.feedItem}>{post.thoughtTitle}</ThoughtTitleText>
            </View>
        
        </View>
        </TouchableCmp>
        </View>
    );
};

render() {
    return (
        <View style={styles.container}>
             <Button
                    onPress={() => {
                        Fire.shared.signOut();
                    }}
                    title="Log out"
                />

            <FlatList
                showsVerticalScrollIndicator={false}
                keyExtractor={item => item.id}
                style={styles.feed}
                data={this.state.latestPost}
                renderItem={( {item,index }) =>
                 this.renderLatestPost(item,index)
                } 
            />
        </View>
    );
}
   
        
    
}

const styles = StyleSheet.create({
    container: {
        flex: 1,backgroundColor: Colors.background
    },feed: {
        marginHorizontal: 16
    },feedItem: {
        borderRadius: 5,padding: 2,flexDirection: "row",marginVertical: 2
    },name: {
        fontSize: 15,fontWeight: "500",color: "#454D65"
    },timestamp: {
        fontSize: 11,color: "#C4C6CE",marginTop: 4
    },post: {
        marginTop: 16,fontSize: 14,color: "#838899"
    },postImage: {
        width: undefined,height: 150,borderRadius: 5,marginVertical: 16
    },container: {
        flex:1,borderRadius: 10,padding:15,justifyContent: 'flex-end',alignItems: 'flex-end'
        },thought: {
        color: '#666',fontSize: 18,marginBottom: 5,alignItems: 'center' 
        },infoText:{
            flexDirection: "row"
        },// icons: {
        //     flexDirection: 'row'
        // },userAvatar: {
            backgroundColor: Colors.subheadings,borderColor: Colors.accent,borderWidth:3.5,backgroundColor: Colors.maintext,marginEnd: 15,width: 35,height: 35,borderRadius: 20,} 
});

这是我的Fire.js 

import FirebaseKeys from "./config/FirebaseKeys";
import firebase from "firebase/app";
import '@firebase/auth';
import 'firebase/database';
import '@firebase/firestore';
import "firebase/storage";
require("firebase/firestore");

class Fire {
constructor() {
    firebase.initializeApp(FirebaseKeys);
}

getPosts = async (displayLatestPost) => {
    const post = await 

this.firestore.collection('thoughts').orderBy('timestamp','  desc').limit(10).get()
    
    let postArray =[]
    post.forEach((post) => {
        
        postArray.push({id: post.id,...post.data()})
    })

  displayLatestPost(postArray)  
}


addPost = async ({ thoughtTitle,thoughtText,localUri,avatar,username}) => {
    const remoteUri = await this.uploadPhotoAsync(localUri,`photos/${this.uid}/${Date.now()}`);
   
    return new Promise((res,rej) => {
         this.firestore
            .collection("thoughts")
            .add({
                uid: this.uid,thoughtTitle,image: remoteUri,timestamp: this.timestamp,})
            .then(ref => {
                res(ref);
            })
            .catch(error => {
                rej(error);
            });
    });
};

uploadPhotoAsync = (uri,filename) => {
    return new Promise(async (res,rej) => {
        const response = await fetch(uri);
        const file = await response.blob();

        let upload = firebase
            .storage()
            .ref(filename)
            .put(file);

        upload.on(
            "state_changed",snapshot => {},err => {
                rej(err);
            },async () => {
                const url = await upload.snapshot.ref.getDownloadURL();
                res(url);
            }
        );
    });
};

createUser = async user => {
    let remoteUri = null;

    try {
        await firebase.auth().createUserWithEmailAndPassword(user.email,user.password);
        
        let db = this.firestore.collection("users").doc(this.uid);

        db.set({
            username: user.username,email: user.email,avatar: null
        });

        if (user.avatar) {
            remoteUri = await this.uploadPhotoAsync(user.avatar,`avatars/${this.uid}`);

            db.set({ avatar: remoteUri },{ merge: true });
        }
    } catch (error) {
        alert("Error: ",error);
    }
}; 



updateProfile = async user => {
    let remoteUri = null;

    try {
        let db = 
this.firestore.collection("users").doc(this.uid);

        db.update({
            username: user.username,error);
    }  

}

signOut = () => {
    firebase.auth().signOut();
};

get firestore() {
    return firebase.firestore();
}

 /*  get username(){
    return firebase.auth().currentUser.username;
  } */

get uid() {
    return (firebase.auth().currentUser || {}).uid;
}

  /*   get avatar(){
    return firebase.auth().currentUser.avatar;
  } */


get timestamp() {
     return Date.now();  
}



}

 Fire.shared = new Fire();
 export default Fire;

解决方法

希望以下信息对您有帮助。

您可以像这样存储名称和个人资料图片URL：

var user = firebase.auth().currentUser;

// Update User Profile
user.updateProfile({
  displayName: "Jane Doe",photoURL: "https://example.com/1hdfabSesfE/profile.jpg"
}).then(function() {
  // Update successful.
}).catch(function(error) {
  // An error happened.
});

// Use these parameters inside the add post function
var profilePicture = user.photoURL;
var name = user.displayName;

,

因此，我更改了createUser和updateUser 

createUser = async user => {
let remoteUri = null;

try {
    await firebase.auth().createUserWithEmailAndPassword(user.email,user.password);
    
    let db = this.firestore.collection("users").doc(this.uid);

    db.set({
        displayName: user.displayName,email: user.email,photoURL: null
    });

    if (user.photoURL) {
        remoteUri = await this.uploadPhotoAsync(user.photoURL,`avatars/${this.uid}`);

        db.set({ photoURL: remoteUri },{ merge: true });
    }
} catch (error) {
    alert("Error: ",error);
}
}; 



updateProfile = async user => {
let remoteUri = null;

try {
    let db = this.firestore.collection("users").doc(this.uid);
   

    db.update({
      displayName: user.displayName,photoURL: user.photoURL
    });

    if (user.photoURL) {
        remoteUri = await this.uploadPhotoAsync(user.photoURL,error);
}  

}

然后我更改了我的addPost 

    addPost = async ({ thoughtTitle,thoughtText,localUri,photoURL,displayName}) => {
    const remoteUri = await this.uploadPhotoAsync(localUri,`photos/${this.uid}/${Date.now()}`);
   

    return new Promise((res,rej) => {
        
         this.firestore
            .collection("thoughts")
            .add({
                uid: this.uid,displayName,thoughtTitle,image: remoteUri,timestamp: this.timestamp,})
            .then(ref => {
                res(ref);
            })
            .catch(error => {
                rej(error);
            });
    });
};

感谢所有帮助-一切正常！

这是我的帐户屏幕，我在其中更新displayName和photoURL 

import React from "react";
import { View,Text,StyleSheet,Button,Image,TextInput,TouchableOpacity} from 
 "react-native";
import Fire from "../../Fire";
import { MaterialIcons } from "@expo/vector-icons"
import * as ImagePicker from "expo-image-picker";
import UserPermissions from "../../utilities/UserPermissions";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
//import Avatar from '../../components/User/Avatar';

     export default class AccountScreen extends React.Component {
      state = {
      user: {},updatedUser: {
       photoURL: null,displayName: ""
      }
      };

    unsubscribe = null;

    componentDidMount() {
    const user = this.props.uid || Fire.shared.uid;

    this.unsubscribe = Fire.shared.firestore
        .collection("users")
        .doc(user)
        .onSnapshot(doc => {
            this.setState({ user: doc.data() });
        });
}

componentWillUnmount() {
    this.unsubscribe();
}


    handleUpdate = () => {
     Fire.shared.updateProfile(this.state.updatedUser);
    };

     handlePickAvatar = async () => {
    UserPermissions.getCameraPermission();

  let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,allowsEditing: true,aspect: [1,1],quality: 0.1
  });

  if (!result.cancelled) {
      this.setState({ updatedUser: { ...this.state.updatedUser,photoURL: result.uri 
  } });
  }
   };




      render() {
      return (
        <View style={styles.container}>
          <KeyboardAwareScrollView
            style={{ flex: 1,width: '100%' }}
            keyboardShouldPersistTaps="always">
         <View style={styles.container}>
                <TouchableOpacity style={styles.avatarContainer} onPress=. 
    {this.handlePickAvatar}>
                    <Image
                        source={
                            this.state.updatedUser.photoURL
                                ? { uri: this.state.user.photoURL }
                                : require("../../assets/tempAvatar.jpg")
                        }
                        style={styles.avatar}
                        /> 
                        
                        
                     <MaterialIcons 
                     name="photo-camera" 
                     size={40} color="grey" 
                     style={{ marginTop: 6,marginLeft: 2 }} 
                     />         
                   </TouchableOpacity>
                    
               <View>
                   <TextInput
                        style={styles.border}
                        placeholder= "change username"
                        onChangeText={displayName => this.setState({ updatedUser: { ...this.state.updatedUser,displayName } })}
                        value={this.state.updatedUser.displayName}
                    ></TextInput>
                </View>
               <TouchableOpacity onPress={this.handleUpdate}>
                <MaterialIcons name="check" size={24} color="black" />
                </TouchableOpacity>
            </View> 
          

        </KeyboardAwareScrollView>
        </View>
    );
}
  }

    const styles = StyleSheet.create({
    container: {
    flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center'

  },profile: {
    marginTop: 64,alignItems: "center"
},avatarContainer: {
    shadowColor: "#151734",shadowRadius: 30,shadowOpacity: 0.4
},avatar: {
    width: 100,height: 100,borderRadius: 68
},name: {
    marginTop: 24,fontSize: 16,fontWeight: "600"
},statsContainer: {
    flexDirection: "row",justifyContent: "space-between",margin: 32
},stat: {
    alignItems: "center",flex: 1
},statAmount: {
    color: "#4F566D",fontSize: 18,fontWeight: "300"
},statTitle: {
    color: "#C3C5CD",fontSize: 12,fontWeight: "500",marginTop: 4
},border: {
    width: 200,margin: 10,padding: 15,borderColor: '#d3d3d3',borderBottomWidth: 1,textAlign: 'center'
  },});

这是我的Home.js 

  import React from "react";
  import { View,FlatList,Platform,TouchableNativeFeedback,TouchableOpacity,Button } from "react-native";
  import Fire from '../../Fire';
  import UsernameText from ' 
  ../../components/Text/DefaultUsernameText';
  import CreatedAtText from '../../components/Text/CreatedAtText';
  import ThoughtTitleText from ' 
  ../../components/Text/DefaultThoughtTitle';
  import Colors from  '../../constants/Colors';
  import moment from 'moment';

  let TouchableCmp = TouchableOpacity;
  if (Platform.OS === 'android' && Platform.Version >= 21) {
  TouchableCmp = TouchableNativeFeedback;
  }


 export default class HomeScreen extends React.Component {

 state = {
    latestPost: [],}

 displayLatestPost = (latestPost) => {
 this.setState({latestPost: latestPost});
 console.log("latest Post " + this.state.latestPost);
}

componentDidMount(){
Fire.shared.getPosts(this.displayLatestPost);
console.log("This is the displayLatestPost " + this.state.latestPost);

 }




 renderLatestPost = (post) => {
   return (
     <View>

     <TouchableCmp onPress={() => {}} style={{flex: 1}}>
     <View style={styles.container}>
        <View style={styles.infoText}>
         

         <Image style={styles.userAvatar} source={{uri: 
post.photoURL}} />
            <UsernameText style={styles.name} >{post.displayName}. 
</UsernameText>
<CreatedAtText style={styles.timestamp}>. 
  {moment(post.timestamp).fromNow()}</CreatedAtText>
         </View>
        <View style={styles.container} >
  <ThoughtTitleText style={styles.feedItem}>{post.thoughtTitle}. 
  </ThoughtTitleText>
         </View>
    
      </View>
      </TouchableCmp>
      </View>
    );
  };

 render() {
    return (
       <View style={styles.container}>
         <Button
                onPress={() => {
                    Fire.shared.signOut();
                }}
                title="Log out"
            />

        <FlatList
            showsVerticalScrollIndicator={false}
            keyExtractor={item => item.id}
            style={styles.feed}
            data={this.state.latestPost}
            renderItem={( {item,index }) =>
             this.renderLatestPost(item,index)
            } 
        />
    </View>
     );
   }

    

   }

   const styles = StyleSheet.create({
   container: {
    flex: 1,backgroundColor: Colors.background
  },feed: {
      marginHorizontal: 16
 },feedItem: {
    borderRadius: 5,padding: 2,flexDirection: "row",marginVertical: 2
},name: {
    fontSize: 15,color: "#454D65"
},timestamp: {
    fontSize: 11,color: "#C4C6CE",post: {
    marginTop: 16,fontSize: 14,color: "#838899"
},postImage: {
    width: undefined,height: 150,borderRadius: 5,marginVertical: 16
},container: {
    flex:1,borderRadius: 10,padding:15,justifyContent: 'flex-end',alignItems: 'flex-end'
    },thought: {
    color: '#666',marginBottom: 5,alignItems: 'center' 
    },infoText:{
        flexDirection: "row"
    },// icons: {
    //     flexDirection: 'row'
    // },userAvatar: {
        backgroundColor: Colors.subheadings,borderColor: Colors.accent,borderWidth:3.5,backgroundColor: Colors.maintext,marginEnd: 15,width: 35,height: 35,borderRadius: 20,} 
  });
expofirebasegoogle-cloud-firestorereact-nativereactjsreactjs

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...