当animationEnabled属性设置为false时，React导航动画仍然显示

问题描述 投票：0回答：2

我正在创建一个底部选项卡栏，但没有使用内置的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';
const{brand, 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;

欢迎.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
const{brand, 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}>[email protected]</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
}
javascript react-native react-navigation react-native-navigation
2个回答
7
投票

当您使用 NativeStackNavigator 时，您不应该使用 animationEnabled 而应使用 animation。

支持的值列表：https://reactnavigation.org/docs/native-stack-navigator#animation

options = {
    {
        animation: 'none',
    }
}
0
投票

我刚刚将 

@react-navigation
软件包从 5.x 更新到 6.x，
animationEnabled
选项键到处都消失了。意思就是不管是
Stack.Navigator
还是
Stack.Screen
，要关闭动画应该这样写：

<Stack.Screen
  name={SCREEN.CONTACT_SEARCH_SCREEN}
  component={ContactSearchScreen}
  options={{
    gestureEnabled: false,
    animation: 'none' // <==== LIKE HERE
  }}
/>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.