createMaterialTopnavigator React Navigation v5 屏幕之间的白色闪烁

Question

在屏幕之间滑动时，materialTopNavigator 的屏幕之间出现白色闪烁。有一个抽屉导航器，它嵌套了一个堆栈导航器，它进一步嵌套了选项卡导航器。

TabView 代码（发生 flickr 的地方）

const TabView = createMaterialTopTabNavigator();
export const MyTabView = props => {
  return (
    <TabView.Navigator
      initialLayout={{ width: Dimensions.get('window').width, backgroundColor: '#121212' }}
      tabBarOptions={{
        activeTintColor: '#FF8458',
        inactiveTintColor: '#FF845840',
        labelStyle: {
          fontSize: 12,
          fontStyle: 'italic',
          fontWeight: 'bold'
        },
        style: { backgroundColor: '#361B0F' },
        indicatorStyle: { backgroundColor: '#FF845880' }
      }}
    >
      <TabView.Screen name="Movies" component={DashBoard} />
      <TabView.Screen name="TVShows" component={TvShowTab} />
    </TabView.Navigator>
  );
}

Answer 1

通过在 materialTopNavigator 的 sceneContainerStyle 属性中传递背景颜色，修复了 90% 的闪烁。

export const MyTabView = props => {
  return (
    <TabView.Navigator
      initialLayout={{ width: Dimensions.get('window').width, backgroundColor: '#121212' }}
      sceneContainerStyle={{
        backgroundColor: '#361B0F',
      }}
      tabBarOptions={{
        activeTintColor: '#FF8458',
        inactiveTintColor: '#FF845840',
        labelStyle: {
          fontSize: 12,
          fontStyle: 'italic',
          fontWeight: 'bold'
        },
        tabStyle: {

        },
        style: { backgroundColor: '#361B0F', },
        indicatorStyle: { backgroundColor: '#FF845880' }
      }}
    >
      <TabView.Screen name="Movies" component={DashBoard} />
      <TabView.Screen name="TVShows" component={TvShowTab} />
    </TabView.Navigator>
  );
}//MyTabView

createMaterialTopnavigator React Navigation v5 屏幕之间的白色闪烁

White flicker between screens in createMaterialTopnavigator React Navigation v5

react-native-android

react-navigation

react-navigation-v5