React Native - панель перерисовки React Navigation на goBack ()

Вот как я добился!

На панели А

refreshFunction()
{
    //your refresh code should be here
}

 <TouchableOpacity onPress={()=>{
   this.props.navigation.navigate('PanelB', {refreshFunction: this.refreshFunction});
 }}>
    Redirect to Panel B
 </TouchableOpacity>

На панели B

const refreshFunction = this.props.navigation.state.params.refreshFunction;
if(typeof refreshFunction === 'function')
{
  refreshFunction();                
  //your back function
  this.goBack();
}

React Navigation предоставляет слушателей, который можно использовать для этого точного сценария.

Например, прикрепите прослушиватель к панели A, который будет повторно получать обновленные данные при фокусировке (т. Е. Когда панель A "возвращается"):

componentDidMount() {
  const { fetchDatabaseData, navigation } = this.props
  fetchDatabaseData()
  this.willFocusListener = navigation.addListener(
    'willFocus',
    () => {
      fetchDatabaseData()
    }
  )
}

componentWillUnmount() {
  this.willFocusListener.remove()
}

После стольких поисков вывод: да, вы можете:

render(){
...
   <NavigationEvents
      onWillFocus={() => {
      //Call whatever logic or dispatch redux actions and update the screen!
      }}
   />
...
}

Источник: https://github.com/react-navigation/react-navigation/issues/1171

При использовании redux + firebase у меня возникла проблема, когда наблюдаемые данные из firebase.on('value', snapshot => { dispatch(data) }, которые были mappedToProps, обновляли хранилище redux при сохранении до того, как компонент, который перечислял эти данные, возвращался в представление onBack(), поэтому повторная визуализация не запускалась в списке. Я решил это, сравнив прошлые и текущие реквизиты и повторно запустив firebase.on fn только тогда, когда реквизиты не совпадают. Это лучше, чем всегда срабатывать при переходе к компоненту списка, но я бы предпочел решение, которое принудительно запускает повторный рендеринг без вызова firebase fn вообще.

  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) this.props.fetchdata();
  }

В соответствии с документами для событий навигации согласно навигации

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

Если у вас есть такие сценарии, как этот, вы можете использовать redux, которое поможет вам управлять данными на вкладках / экране и в компоненте, потому что сокращение связано с хранилищем, в хранилище redux все состояние приложения удалось.