javascript - 更改路线时 react native 重新渲染

我正在使用一个函数从名为“ MainScreen”的屏幕上的Firebase数据库中获取数据
而且我还使用MainScreen上的按钮转到“ ChangeScreen”并更新Firebase数据库上的数据。
问题是：当我从ChangeScreen返回MainScreen时，没有任何东西再次触发获取功能，并且我需要手动更新。

（已尝试：Backhandler，componentWill（其中许多））

MainScreen.js：

import React, { Component } from 'react'
import { Text, Button } from 'react-native'
import firebase from 'firebase'
import PTRView from 'react-native-pull-to-refresh'

export default class MainScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
          Data: []
        }

        this._LoadTecs = this.LoadTecs.bind(this)
        this._refresh = this.refresh.bind(this)
      }

    LoadTecs = () => {

        let that = this

        firebase.database().ref('Database').once('value', (data) => {
            let dados = data.toJSON()
            this.setState({Data: dados})
        }).catch((error) => {
          console.log(error)
        })
    }

  async componentWillMount() {
    this.LoadTecs()
  }

  refresh = () => {
    this._LoadTecs()
  }

 render() {
    return (
        <PTRView onRefresh={() => this._refresh()} >
            <Text>{this.state.Data}</Text>
            <Button
              title="Navigate to ChangeScreen"
              onPress={() => this.props.navigation.navigate('ChangeScreen')}
            />
        </PTRView>
    );
  }
}

ChangeScreen.js

import React, { Component } from 'react'
import { Button, View, Text} from 'react-native'
import firebase from 'firebase'


export default class ManageScreen extends Component {

  render() {
    return (
        <View>
            <Text>Here you delete the entire database</Text>
            <Button
              title="Navigate to ChangeScreen"
              onPress={() => firebase.database().ref('Database').remove()}
            />
            <Button
              title="Navigate to ChangeScreen"
              onPress={() => this.props.navigation.navigate('ChangeScreen')}
            />
        </View>
    );
  }
}

index.js（我的导航器）

import React, { Component } from 'react'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import MainScreen from './screens/MainScreen'
import ChangeScreen from './screens/ChangeScreen'
import firebase from 'firebase'

const AppSwitchNavigator = createStackNavigator(
  {
    MainScreen: { screen: MainScreen },
    ChangeScreen: { screen: ChangeScreen }
  }
);

const AppContainer = createAppContainer(AppSwitchNavigator)

class App extends Component {

  componentWillMount(){
    //Here i start my firebase btw
  }

  render() {
    return(
      <AppContainer />
    );
  }
}

export default App;

（这只是示例代码）

最佳答案

解决方案是：

从以下更改主屏幕：

[...]
async componentWillMount() {
   this.LoadTecs()
}
[...]

至：

[...]
async componentWillMount() {
   this.focusListener = this.props.navigation.addListener('didFocus', () => {
      this.LoadTecs()
   })
   }
[...]

感谢Calvin Nunes

关于javascript - 更改路线时 react native 重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59201768/