React native 组件仅在选项卡屏幕中安装一次？

我有一个5页的本地应用程序。第五个选项卡是配置文件屏幕。这是配置文件选项卡代码，我删除了很多内容，因为这主要关注组件的装载：

class Profile extends React.Component {

constructor(props) {
    super(props)
    this.state = {
        user: this.props.user,
        bio: "",
        storage_image_uri: '',
        postCount: 0,
        followerCount: 0,
        followingCount: 0,
        isLoading: true,
        navigation: this.props.navigation,
        userUID: Firebase.auth().currentUser.uid,
    }

    this.firestoreRef = 
    Firebase.firestore()
    .collection('posts')
    .doc(this.state.userUID)
    .collection('posts')
    .orderBy("date_created", "desc");
    
}

componentDidMount() {
    console.log("querying the db again")
    this.pullUserInfo()
    this.unsubscribe = this.firestoreRef.onSnapshot(this.getCollection);
}

componentWillUnmount(){
    this.unsubscribe();
}

pullUserInfo = async() => {
    await Firebase.firestore()
    .collection('users')
    .doc(this.state.userUID)
    .get()
    .then(function(doc){
        if (doc.exists) {
            this.setState({
                postCount: doc.data().postCount,
                followerCount: doc.data().followerCount,
                followingCount: doc.data().followingCount,
                storage_image_uri: doc.data().profilePic,
                bio: doc.data().bio,
                isLoading: false
            })
        } else {
            console.log("No such document!");
        }
    }.bind(this))
} 

gotToSettings() {
    this.state.navigation.navigate('Settings')
}

renderListHeader = () => {
    ... deleted, just rendering this information
}

render() {

    const { navigation } = this.props;
    const renderItem = ({ item }) => (

        <CurrentUserPostCell 
            ..deleted, unnecessary for this question
        />
    );

    if(this.state.isLoading){
        return(
          <View styles = {styles.container}>
            <ActivityIndicator size="large" color="#9E9E9E"/>
          </View>
        )
    }    
    return (
        <View>
            <FlatList
                data={this.state.userPostsArray}
                renderItem={renderItem}
                keyExtractor={item => item.key}
                ListHeaderComponent={this.renderListHeader}
                contentContainerStyle={{ paddingBottom: 50 }}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
            />
        </View>   
    )
}
}

类配置文件扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户：this.props.user，
生物信息：“，
存储\u映像\u uri:“”，
邮政编码：0，
跟随计数：0，
以下计数：0，
孤岛加载：是的，
导航：this.props.navigation，
userUID:Firebase.auth（）.currentUser.uid，
}
this.firestoreRef=
Firebase.firestore（）
.collection（“posts”）
.doc（this.state.userUID）
.collection（“posts”）
.orderBy（“创建日期”、“描述”）；
}
componentDidMount（）{
log（“再次查询数据库”）
this.pullUserInfo（）
this.unsubscribe=this.firestoreRef.onSnapshot（this.getCollection）；
}
组件将卸载（）{
这个。取消订阅（）；
}
pullUserInfo=async（）=>{
等待Firebase.firestore（）
.collection（'用户'）
.doc（this.state.userUID）
.get（）
.然后（功能（文档）{
如果（文件存在）{
这是我的国家({
postCount:doc.data（）.postCount，
followerCount:doc.data（）.followerCount，
followCount:doc.data（）followCount，
存储\图像\ uri:doc.data（）.profilePic，
bio:doc.data（）.bio，
孤岛加载：false
})
}否则{
log（“没有这样的文档！”）；
}
}.绑定（本）
} 
gotToSettings（）{
this.state.navigation.navigate（'Settings'））
}
RenderLisHeader=（）=>{
…已删除，仅呈现此信息
}
render（）{
const{navigation}=this.props；
常量renderItem=（{item}）=>(
);
if（此.state.isLoading）{
返回(
)
}    
返回(
item.key}
ListHeaderComponent={this.renderListHeader}
contentContainerStyle={{paddingBottom:50}
showshorizontalscrolindicator={false}
showsVerticalScrollIndicator={false}
/>
)
}
}

但是，当我创建一个新帖子，跟随一个新用户，甚至从设置页面更改bio时，组件不会再次查询db。我在componentDidMount（）中添加了console.log（“再次查询数据库”），但它只在我第一次单击profile选项卡时才会打印，以后再也不会打印

我尝试过componentDidUpdate（），但也无法解决任何问题。我怎样才能解决只有在第一次单击选项卡时才安装组件的问题，而不再安装

编辑：根据请求添加设置页面

class Settings extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            user: this.props.user,
            oldBio: "",
            newBio: "",
            profilePic: "",
            isLoading: false,
        }
        
    }

    componentDidMount() {
        this.pullBio()
    }
    
    
    //Pull bio from the db, save it to state
    pullBio = async() => {
        await Firebase.firestore()
        .collection('users')
        .doc(Firebase.auth().currentUser.uid)
        .get()
        .then(function(doc) {
            if (doc.exists) {
                this.setState ({
                    oldBio: doc.data().bio
                })
            } else {
                // doc.data() will be undefined in this case
                    console.log("No such document!");
            }
        }.bind(this));
    }

    changeBio = async() => {
        this.setState({ isLoading: true })
        // This should take us to the right place, adding a temp uid where we need it
        await Firebase.firestore()
        .collection('users')
        .doc(Firebase.auth().currentUser.uid)
        .set({
            bio: this.state.newBio
        }, { merge: true })
        .then(() => this.setState ({ 
            oldBio: this.state.newBio,
            isLoading: false
        }))
        .catch(function(error) {
            console.error("Error storing and retrieving image url: ", error);
        });
    }

    render() {
        if(this.state.isLoading){
            return(
              <View styles = {styles.container}>
                <ActivityIndicator size="large" color="#9E9E9E"/>
              </View>
            )
        }    
        return (
            <View style={styles.container}>
                <TouchableOpacity 
                    onPress={this.logOut}>
                    <Text>Sign out Firestore's 
get
 retrieves data once. You might want to try the 
onSnapshot
 method which will listen for any changes in your document.

firebase.firestore.collection('users').doc(userId)
    .onSnapshot(function(doc){
     //...
})

类设置扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户：this.props.user，
oldBio:“，
新兵：“，
profilePic:“，
孤岛加载：false，
}
}
componentDidMount（）{
this.pullBio（）
}
//从数据库中提取bio，将其保存到状态
pullBio=async（）=>{
等待Firebase.firestore（）
.collection（'用户'）
.doc（Firebase.auth（）.currentUser.uid）
.get（）
.然后（功能（文档）{
如果（文件存在）{
这是我的国家({
oldBio:doc.data（）.bio
})
}否则{
//在这种情况下，将不定义doc.data（）
log（“没有这样的文档！”）；
}
}.约束（这个）；
}
changeBio=async（）=>{
this.setState（{isLoading:true}）
//这应该把我们带到正确的地方，在需要的地方添加临时uid
等待Firebase.firestore（）
.collection（'用户'）
.doc（Firebase.auth（）.currentUser.uid）
.设置({
生物：这个。state。newBio
}，{merge:true}）
.then（（）=>this.setState（{
oldBio:this.state.newBio，
孤岛加载：false
}))
.catch（函数（错误）{
console.error（“存储和检索图像url时出错：”，错误）；
});
}
render（）{
if（此.state.isLoading）{
返回(
)
}    
返回(
注销Firestore的
get
检索数据一次。您可能希望尝试
onSnapshot
方法，该方法将侦听文档中的任何更改

unmountOnBlur: true

即使没有ComponentDidUpdate，这也应该是可行的，因为您已经在componentDidMount中运行状态更新了

阅读。
当您从屏幕设置导航到屏幕配置文件时，配置文件被装入，然后调用配置文件的componentDidMount

之后，当您导航到另一个屏幕时，概要文件仍然在导航堆栈屏幕上，那个么概要文件的componentDidMount将永远不会再次调用

因此，问题是tabBar内的屏幕没有重新安装

您可以在选项卡配置中添加此选项：

链接文档：

其他棘手的解决方法：

添加事件侦听器以检查配置文件屏幕是否聚焦。如果配置文件聚焦，请再次提取数据

链接：
我会给你一个更高层次的答案，这将帮助你以正确的方式解决问题

我怎样才能解决只有在第一次单击选项卡时才安装组件的问题，而不再安装

这不是问题。装载意味着该组件以前不存在于此位置的dom树中，然后它开始存在。您的组件只装载一次，因为它在您第一次打开“配置文件”选项卡时（或在启动应用程序时，取决于TabNavigator设置）就开始存在.您根本不希望它在此之后重新安装。重新安装组件