Блог

Главная - Вопросы по программированию - Как анимировать переходы навигации React с помощью createBottomTabNavigator?

Как анимировать переходы навигации React с помощью createBottomTabNavigator?

#android #ios #react-native #react-navigation #react-native-reanimated-v2

Вопрос:

Я провел последний день, пытаясь выяснить, как реализовать простой переход на экран с плавным переходом с помощью навигации по реакции, но я не могу найти способ заставить его работать с навигатором на нижней вкладке. Кто-нибудь может мне помочь? Я много читал документы, но анимации, похоже, доступны только с навигатором стека.

Можете ли вы заставить переходы работать над этой демонстрацией закусок?

https://snack.expo.io/?platform=androidamp;name=Native Stack Navigator | React Navigationamp;dependencies=@expo/vector-icons@*,@react-native-community/masked-view@*,react-native-gesture-handler@*,react-native-pager-view@*,react-native-paper@^4.7.2,react-native-reanimated@*,react-native-safe-area-context@*,react-native-screens@*,react-native-tab-view@^3.0.0,@react-navigation/bottom-tabs@6.0.4,@react-navigation/drawer@6.1.3,@react-navigation/elements@1.0.4,@react-navigation/material-bottom-tabs@6.0.4,@react-navigation/material-top-tabs@6.0.2,@react-navigation/native-stack@6.0.5,@react-navigation/native@6.0.2,@react-navigation/stack@6.0.6amp;hideQueryParams=trueamp;sourceUrl=https://reactnavigation.org/examples/6.x/tab-based-navigation-minimal.js

Комментарии:

1. Если мой ответ был полезен, пожалуйста, поделитесь своими отзывами.

2. Так и было, спасибо. У меня просто еще недостаточно репутации, чтобы голосовать.

Ответ №1:

Просто создайте Animated.View и прикрепите его к своим экранам.

 const FadeHomeScreen = (props) => (
  <FadeInView>
    <HomeScreen {...props} />
  </FadeInView>
);

затем используйте это для Tab.Screen 

 <Tab.Screen name="Home" component={FadeHomeScreen} />

и просто добавьте unmountOnBlur: true в screenOptions 

 const screenOptions = {
    unmountOnBlur: true,
    headerShown: false,
};

<Tab.Navigator {...{ screenOptions }}>

Code: https://snack.expo.dev/@fanish/native-stack-navigator-|-react-navigation

Вы также можете использовать react-native-reanimated для создания <FadeInView /> компонента

Комментарии:

1. Огромное спасибо. Однако есть ли способ поддерживать состояние на выцветшей странице? Включение отключения блокировки приводит к тому, что пользователь теряет всю историю навигации. Существует ли подход, который обеспечивает одно и то же поведение, но сохраняет всю логику состояний?

2. Да, есть способ сделать это, но вам придется использовать focus прослушиватель событий. Запуск действия с помощью прослушивателя событий «фокус» и вызова FadeAnimation .

3. заставил это работать с помощью крючка useFocusEffect snack.expo.dev/@pedrosousa/fade-animation-between-bottom-tabs . Теперь следующим шагом на самом деле является реализация анимации затухания, которая переключается между содержимым экрана, а не между полем rootviewbackground (в данном случае пустой белый экран).

4. Добавьте это свойство <Tab.Navigator {...{ screenOptions,sceneContainerStyle }}> и const sceneContainerStyle={ backgroundColor:'#95a5a6' } Вы не увидите белого экрана.

Метки: