Я пытаюсь создать приложение React Native, но я все еще новичок в экосистеме React/RN, поэтому я могу просто неправильно понять что-то очевидное в связи с проблемой, с которой я столкнулся.
У меня есть приложение, в котором многие страницы структурированы следующим образом:
<View>
<NavComponent />
<View>
{/* Page component structure/logic here */}
</View>
</View>
NavComponent загружает переключаемое навигационное меню с TouchableOpacity элементами, как показано ниже:
Go to Screen #1
Go to Screen #2
Go to Screen #3
Проблема, с которой я столкнулся (и, возможно, это не столько проблема, сколько то, как работает React/RN), заключается в том, что если я начну с экрана №1, открою навигацию, перейду на экран №2, снова открою навигацию, а затем вернитесь к экрану № 1, хотя экран № 1 снова появляется, фактическая функция рендеринга для экрана № 1, похоже, больше не вызывается, и поскольку NavComponent является частью рендеринга каждого экрана, когда я пытаюсь чтобы снова открыть навигацию с экрана № 1, я получаю следующее предупреждение:
Предупреждение: невозможно выполнить обновление состояния React для несмонтированного компонента. Это не работает, но указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в %s.%s, функция очистки useEffect...
Опять же, возможно, мой подход к приложению изначально ошибочен, но, по сути, когда я перехожу с одного экрана на другой из навигации, я всегда хочу, чтобы новый экран повторно отображался с нуля (включая первоначальный вызов данных Ajax) .
Вот более подробный пример функции рендеринга для экрана (все они следуют одному и тому же базовому шаблону):
const screen1 = ({ navigation }) => {
const [serverData, setServerData] = useState(null);
useEffect(() => {
// getPageData is a custom method I added to axios.
axios.getPageData('/api/url/here', (data) => {
setServerData(data);
});
}, []);
if (serverData) {
const { meta, user, data } = serverData;
return (
<View>
<NavComponent />
<View style={styles.container}>
{/* Page component structure/logic here */}
</View>
</View>
);
}
return null;
};
Если, например, я добавил console.log в начало функции рендеринга выше, она вызывается при первой загрузке экрана, но если я перейду на экран №2, а затем вернусь на экран №1 через компонент навигации, console.log больше не выводится. Почему?
И что бы это ни стоило, я использую стандартные navigation.navigate('ScreenName') в NavComponent для перехода от экрана к экрану.
Будем очень признательны за любые советы о том, как исправить предупреждение (и/или просто улучшить дизайн приложения), чтобы у меня была эта навигация на каждой странице. Спасибо.
