Как можно вызвать функцию из другого экрана в react navite?

В React Native, чтобы вызвать функцию из другого экрана, мы можем использовать различные подходы в зависимости от того, как мы организовываем навигацию в нашем приложении.

1. Если мы используем библиотеку React Navigation, то мы можем воспользоваться функцией navigation.navigate() для навигации между экранами и передавать параметры через объект params. В этом случае, мы можем передать функцию из одного экрана в другой при переходе.

В примере ниже мы передаем функцию myFunction из экрана ScreenA в экран ScreenB:

// ScreenA.js
import React from 'react';
import { Button } from 'react-native';

const ScreenA = ({ navigation }) => {
  const myFunction = () => {
    console.log('Function called');
  };

  return (
    <Button
      title="Go to Screen B"
      onPress={() => navigation.navigate('ScreenB', { myFunction })}
    />
  );
};

export default ScreenA;

// ScreenB.js
import React, { useEffect } from 'react';

const ScreenB = ({ navigation, route }) => {
  const { myFunction } = route.params;

  useEffect(() => {
    myFunction();
  }, []);

  return (
    // ...
  );
};

export default ScreenB;

2. Если мы используем библиотеку React Navigation и Redux, то можно использовать Redux для передачи функции из одного экрана в другой. Для этого мы можем сохранить функцию в Redux-хранилище и затем получить ее из другого экрана.

В примере ниже мы используем Redux для передачи функции myFunction из экрана ScreenA в экран ScreenB:

// actions.js
export const setFunction = (func) => ({
  type: 'SET_FUNCTION',
  payload: func,
});

// reducer.js
const initialState = {
  myFunction: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_FUNCTION':
      return {
        ...state,
        myFunction: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

// ScreenA.js
import React from 'react';
import { Button } from 'react-native';
import { useDispatch } from 'react-redux';
import { setFunction } from './actions';

const ScreenA = () => {
  const dispatch = useDispatch();
  const myFunction = () => {
    console.log('Function called');
  };

  const goToScreenB = () => {
    dispatch(setFunction(myFunction));
    navigation.navigate('ScreenB');
  };

  return (
    <Button title="Go to Screen B" onPress={goToScreenB} />
  );
};

export default ScreenA;

// ScreenB.js
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';

const ScreenB = () => {
  const myFunction = useSelector((state) => state.myFunction);

  useEffect(() => {
    myFunction();
  }, []);

  return (
    // ...
  );
};

export default ScreenB;

3. Если мы используем библиотеку React Navigation и Context API, то мы можем использовать контекст для передачи функции из одного экрана в другой. Мы создаем контекст, в котором храним функцию, и затем используем его значения в разных экранах.

В примере ниже мы используем контекст для передачи функции myFunction из экрана ScreenA в экран ScreenB:

// MyContext.js
import React from 'react';

const MyContext = React.createContext({
  myFunction: () => {},
});

export default MyContext;

// ScreenA.js
import React from 'react';
import { Button } from 'react-native';
import MyContext from './MyContext';

const ScreenA = () => {
  const myFunction = () => {
    console.log('Function called');
  };

  return (
    <MyContext.Provider value={{ myFunction }}>
      <Button
        title="Go to Screen B"
        onPress={() => navigation.navigate('ScreenB')}
      />
    </MyContext.Provider>
  );
};

export default ScreenA;

// ScreenB.js
import React, { useEffect } from 'react';
import MyContext from './MyContext';

const ScreenB = () => {
  const context = React.useContext(MyContext);

  useEffect(() => {
    context.myFunction();
  }, []);

  return (
    // ...
  );
};

export default ScreenB;

Перечисленные методы предоставляют различные варианты для вызова функции из другого экрана в React Native. Выбор подхода зависит от вашего предпочтения, архитектуры приложения и используемых библиотек.