反应导航默认背景颜色

Posted 2023-02-19

【中文标题】反应导航默认背景颜色

【英文标题】：React Navigation default background color

【发布时间】：2018-06-23 12:22:09

【问题描述】：

我正在使用 react-navigation 和 stack-navigator 来管理我的屏幕。

我正在使用的平台：

安卓 反应原生：0.47.1 反应导航：1.0.0-beta.11 模拟器和设备

我有一个屏幕，充当模态表单，但它实际上是一个全屏。为什么“作为模态形式”这一部分很重要？那是因为它是一种模式菜单，带有一些选项和具有透明背景颜色。

这是我所期望的：

但我得到的是：

如您所见，在第二个示例中，背景颜色已完全替换，或者先前加载的组件已卸载，因此我想要实现的效果丢失了。 我们的想法是能够像任何其他屏幕一样导航到此屏幕。

如果使用 react-navigation 无法完成，我还能采取什么其他方式来完成？

这个组件执行动作（redux），因为它是一个跨应用程序组件，并在内部封装了许多机制和逻辑，这就是为什么我不能将它用作PureComponent 中继使用这个组件的组件。至少，将这个组件作为 PureComponent 将迫使我在许多其他组件中复制许多机制和逻辑。

为了这个问题，也为了避免问题太大，两个屏幕的样式完全相同，但通过StackNavigation 的那个会替换backgroundColor，或者卸载前一个屏幕。

这是我目前所拥有的：

//PlaylistSelector.js
render() 
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style= flex: 1, backgroundColor: 'transparent' >
    </View>
  );


//Navigator.js
import  StackNavigator  from 'react-navigation';

import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';

const AppNavigator = StackNavigator(
    
        ...moreScreens,
        Album:  screen: Album ,
        PlaylistSelector: 
            screen: PlaylistSelector,
            navigationOptions: 
                style:  backgroundColor: 'red'  //Does not work, red is just to ilustrate, should be transparent,
                cardStyle:  //Does not work,
                    backgroundColor: 'transparent',
                ,
                bodyStyle:  //Does not work,
                    backgroundColor: 'transparent',
                ,
            
        
    ,
    
        initialRouteName: 'Splash',
        headerMode: 'none',
        cardStyle:  //Does not work
            backgroundColor: 'transparent',
        ,
        transitionConfig: (): Object => ( //Does not work
            containerStyle: 
                backgroundColor: 'transparent',
            ,
        ),
    
);

export default AppNavigator;

【问题讨论】：

任何解决方案？现在有这个问题。

我必须创建自己的模态并专门针对这种情况进行管理。我还没有回到这个问题，所以我真的不知道它是否已经解决了。

我刚刚设法使用containerStyle:backgroundColor: 'transparent' 解决了这个问题，结果发现我正在编辑错误的 stackNavigator，因为我使用的是嵌套的。

【参考方案1】：

react-navigation v6.x

中有解决方案

在 Stack Navigator 的 screenOptions 属性上设置 cardStyle: backgroundColor: 'transparent'对我不起作用。

但是，在this Github issue page 的帮助下，我找到了一个为我们的 NavigatorContainer 设置默认背景颜色的解决方案：

import 
  DefaultTheme,
  NavigationContainer,
 from '@react-navigation/native';

...

const navTheme = 
  ...DefaultTheme,
  colors: 
    ...DefaultTheme.colors,
    background: 'transparent',
  ,
;

...

return (
    <NavigationContainer
      theme=navTheme
...

在那里，我们可以将'transparent' 更改为我们想要的任何内容。

【参考方案2】：

只是抛出对我来说最直接的东西，例如在screenOptions 上设置headerBackground：

    <Stack.Navigator
      headerMode="float"
      screenOptions=
        headerBackground: () => <View style=flex: 1, backgroundColor: themeContext.background />,
        backgroundColor: themeContext.background
      
    >

这不适用于透明标题，这实际上可能是首先引导您到这里的原因。在这种情况下，只需将整个应用容器包装到这样的视图中。

export default function App() 
  return (
    <View style=flex: 1, backgroundColor: 'red'>
      <NavigationContainer linking=linkingConfig>
        <StatusBar />
        <ApolloProvider client=client>
          <Provider store=store>
            <Navigator />
          </Provider>
        </ApolloProvider>
      </NavigationContainer>
    </View>
  )

显然您想将其提取到它自己的（样式化）组件中：）

如果您使用的是 Expo，并且没有单独的深色主题，您只需在您的 app.json 中设置 backgroundColor。

【参考方案3】：

这种方式对我有用：

const MyDrawerNavigator = createStackNavigator(
    
        screen1: 
            screen: screen1,
        ,
        screen2: 
            screen: screen2,
        ,
    ,
    
        navigationOptions: () => (
            cardStyle: 
                backgroundColor: "rgba(0,0,0,0.5)",
            ,
        ),
    

);

【参考方案4】：

这在最新的React Navigation 版本中确实发生了变化。见

https://reactnavigation.org/docs/themes/

例如

import * as React from 'react';
import  NavigationContainer, DefaultTheme  from '@react-navigation/native';

const MyTheme = 
  ...DefaultTheme,
  colors: 
    ...DefaultTheme.colors,
    background: 'red'
  ,
;

export default function App() 
  return (
    <NavigationContainer theme=MyTheme>/* content */</NavigationContainer>
  );

【讨论】：

非常适合 react-native 5.0

我的应用程序使用深色，并且在屏幕转换过程中出现白色闪烁，使用它可以消除白色闪烁，谢谢。

【参考方案5】：

使用 react-navigation v3.x 你可以使用 transparentCard pro：

const MainNavigator = createStackNavigator(
  
    BottomTabs: 
      screen: BottomTabsStack,
    ,
    Modal: 
      screen: ModalScreen,
    
  ,
  
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
    cardStyle:  opacity: 1  //This prop is necessary for eventually issue.
  
);

你可以在下面找到一个完整的例子：

https://snack.expo.io/@cristiankmb/stacks-in-tabs-with-header-options-with-modal

【讨论】：

这应该被标记为正确答案。 This 是来自 ReactNavigation doc 的 Modal 小吃演示。我尝试应用上述配置，它确实有效。

【参考方案6】：

从react-navigation@2.17.0 开始，有一个配置选项transparentCard 使这成为可能。

const RootNavigator = createStackNavigator(
  
    App,
    YourModal,
  ,
  
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
  ,
);

这不会为您模糊背景；它只会让它变得透明。要正确模糊它，您需要执行this 之类的操作。确保您从屏幕顶部边缘上方开始背景，因为卡片将从底部开始动画，并且您可能希望屏幕逐渐模糊，而不是在动画时不透明度具有锐利的边缘。

【参考方案7】：

添加不透明度：

cardStyle: 
  backgroundColor: "transparent",
  opacity: 1

【参考方案8】：

既然你想要'Modal'，你可以使用 react-native 内置的'Modal'。

https://facebook.github.io/react-native/docs/modal.html

【讨论】：

不管是不是模态表单，StackNavigator都会卸载上一屏

StackNavigator unmounts the previous screen 是什么意思？该链接不是关于模态导航，而是简单的模态。

使用Modal，按照您提出的方式，意味着我每次需要时都必须手动渲染它，而且由于它是一个跨应用程序屏幕，我想像它一样导航它是任何其他屏幕（this.props.navigation.navigate('ModalScreen', ...)），并将其连接到 redux 商店。这样做，无论是Modal还是View，由于之前的屏幕被卸载，结果总是我上面描述的。

啊，我又仔细看了你的问题，明白了。我很抱歉。