当 animationEnabled 属性设置为 false 时，React Navigation 动画仍然显示
Posted
技术标签:
【中文标题】当 animationEnabled 属性设置为 false 时，React Navigation 动画仍然显示【英文标题】：React Navigation animation still showing when animationEnabled prop is set to false 【发布时间】：2022-01-08 15:41:05 【问题描述】：我在没有使用 react-native-navigation 内置标签栏的情况下创建了一个底部标签栏，我想禁用左右滑动动画。首先我尝试使用 animationEnabled 道具，但它似乎没有做任何事情。我也尝试使用计时并将持续时间设置为 0，但它也没有工作。我做错了什么？
RootStack.js
// import react navigation
import NavigationContainer from '@react-navigation/native';
import createNativeStackNavigator from '@react-navigation/native-stack';
// import screens
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import Welcome from '../screens/Welcome';
import AccountScreen from '../screens/AccountScreen';
import NewsScreen from '../screens/NewsScreen';
import SearchScreen from '../screens/SearchScreen';
import TrendingScreen from '../screens/TrendingScreen';
import TabBarComponent from '../components/TabBarComponent';
// Colors
import Colors from '../components/styles';
constbrand, darkLight, primary, tertiary = Colors;
import React, useState from 'react';
const Stack = createNativeStackNavigator();
const ArrowStack = () =>
return(
<NavigationContainer>
<Stack.Navigator
timingConfig=
duration: 0,
screenOptions=
animationEnabled: false,
headerShown: true,
headerStyled:
backgroundColor: 'transparent',
elevation: 0
,
headerShadowVisible: false,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle:
paddingLeft:20
initialRouteName="Login"
>
<Stack.Screen name="Login" component=Login />
<Stack.Screen name="Signup" component=Signup />
<Stack.Screen name="Welcome" component=Welcome />
<Stack.Screen name="Account" component=AccountScreen />
<Stack.Screen name="Search" component=SearchScreen />
<Stack.Screen name="Trending" component=TrendingScreen />
<Stack.Screen name="News" component=NewsScreen />
</Stack.Navigator>
</NavigationContainer>
);
export default ArrowStack;
Welcome.js
import React from 'react';
import StatusBar from 'expo-status-bar';
import Pressable, TouchableOpacity from 'react-native';
import TabBarComponent from '../components/TabBarComponent';
import
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer
from './../components/styles'
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
// Colors
constbrand, darkLight, primary = Colors;
const Welcome = ( navigation ) =>
return(
<>
<StatusBar style="light"/>
<InnerContainer>
<WelcomeContainer>
<PageTitle welcome=true>Welcome! Buddy</PageTitle>
<SubTitle welcome=true>Olga Simpson</SubTitle>
<SubTitle welcome=true>johndoe@email.com</SubTitle>
<StyledFormArea>
<Line />
<StyledButton onPress=() =>
navigation.navigate("Login");
>
<ButtonText>
Logout
</ButtonText>
</StyledButton>
</StyledFormArea>
<TabBarContainer>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress=() =>
navigation.navigate("News");
>
<News/>
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Account");
>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Welcome");
>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Trending");
>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Search");
>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainer>
</WelcomeContainer>
</InnerContainer>
</>
);
export default Welcome;
NewsScreen.js
import React from 'react';
import View, Text, TouchableOpacity from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
from './../components/styles'
const NewsScreen = (navigation) =>
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
News Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress=() =>
navigation.navigate("News");
>
<News />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Account");
>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Welcome");
>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Trending");
>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Search");
>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
export default NewsScreen;
AccountScreen.js
import React from 'react';
import View, Text, TouchableOpacity from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
from './../components/styles'
const AccountScreen = (navigation) =>
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Account Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress=() =>
navigation.navigate("News");
>
<News />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Account");
>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Welcome");
>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Trending");
>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Search");
>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
export default AccountScreen;
SearchScreen.js
import React from 'react';
import View, Text, TouchableOpacity from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
from './../components/styles'
const SearchScreen = (navigation) =>
return(
<InnerContainer>
<WelcomeContainer>
<><View>
<Text>
Search Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress=() =>
navigation.navigate("News");
>
<News />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Account");
>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Welcome");
>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Trending");
>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Search");
>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</WelcomeContainer>
</InnerContainer>
);
export default SearchScreen;
TrendingScreen.js
import React from 'react';
import View, Text, TouchableOpacity from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
from './../components/styles'
const TrendingScreen = (navigation) =>
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Trending Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress=() =>
navigation.navigate("News");
>
<News />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Account");
>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Welcome");
>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Trending");
>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress=() =>
navigation.navigate("Search");
>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
export default TrendingScreen;
package.json
"name": "frfr",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts":
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
,
"dependencies":
"@react-native-community/datetimepicker": "3.5.2",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"expo": "~43.0.0",
"expo-status-bar": "~1.1.0",
"formik": "^2.2.9",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1",
"styled-components": "^5.3.3",
"react-native-svg": "12.1.1"
,
"devDependencies":
"@babel/core": "^7.12.9"
,
"private": true
【问题讨论】：
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。 【参考方案1】：当您使用 NativeStackNavigator 时，您不应该使用 animationEnabled 而应使用 animation。
支持的值列表：https://reactnavigation.org/docs/native-stack-navigator#animation
options =
animation: 'none',
【讨论】：
以上是关于当 animationEnabled 属性设置为 false 时，React Navigation 动画仍然显示的主要内容，如果未能解决你的问题，请参考以下文章
当 URL 中没有参数时，将 f:viewParam 属性设置为 null
当 UITextField 的“editingDidBegin”控件事件触发时，将 UITextField 的当前值设置为一个属性