首页 > 解决方案 > React Native 堆栈导航中的闪烁问题

问题描述

我的反应本机堆栈导航出现闪烁问题。如果我使用默认动画或不使用动画,它会在推送和弹出时闪烁(导航到另一个页面并返回上一页)。但是如果我使用CardStyleInterpolators.forHorizo​​ntalIOS它会在弹出窗口中闪烁。另一方面,如果我使用默认的标题背景颜色,那是没有标题样式的闪烁问题没有显示。有人知道任何解决方案吗?


const AdminHomeNavigator = () => (
    <View style={{ flex:1, backgroundColor: colors.deepBlue }}> 
    <Stack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: colors.deepBlue,
              },
              headerTintColor: colors.galleryWhite,
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              
      }}
    >
        <Stack.Screen name="Admin Home" component={AdminHomeScreen} options={{ headerShown: false , }}/>
        <Stack.Screen name="SummaryStatementNavigator" component={SummaryStatementNavigator} options={{ headerShown: false }}/>
        
    </Stack.Navigator>
    </View>
);

包.json:

  "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-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-popup-menu": "^0.15.11",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12",
    "react-native-gesture-handler": "~1.10.2",
    "@react-native-masked-view/masked-view": "0.2.4"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

问题在左上角

https://i.stack.imgur.com/iYuKJ.gif

标签: react-nativereact-navigationstack-navigatorblink

解决方案


推荐阅读