javascript 反应导航默认背景颜色

React Navigation default background color

提问by Facundo La Rocca

I'm using react-navigationand stack-navigator to manage my screens.

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

Platforms I'm using:

我正在使用的平台：

• Android
• React Native: 0.47.1
• React Navigation: 1.0.0-beta.11
• Emulator and Device

• 安卓
• 反应本机：0.47.1
• 反应导航：1.0.0-beta.11
• 模拟器和设备

I have a screen, which acts as a modal formbut it is really a full screen. Why is it important the part of "acts as a modal form"? That's because it is kind of modal menu with some options and WITH A TRANSPARENT BACKGROUND COLOR.

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

This is what I expect:

这是我的期望：

But what I'm getting is this:

但我得到的是这样的：

As you can see, in the second example the background color is completely replaced or the components previously loaded is unmounted so the effect I want to acchieve is lost. The idea is to be able to navigate to this screen like any other screen.

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

If it is not posible to accomplish using react-navigation, what other way can I take to do so?

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

This component executes actions (redux) since is a cross app component and encapsulates lot of mechanisms and logic inside, that's why I can't use it as a PureComponentrelaying on the component which makes use of this one. At least, making this Component as PureComponent would force me to replicate many mechanisms and logic in many other components.

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

For the sake of the question, and to avoid making the question enormous, both screens have exactly the same style, but the one pushed through StackNavigationreplaces the backgroundColor, or unmounts the previus screen.

为了这个问题，也为了避免问题太大，两个屏幕的风格完全相同，但推动的一个StackNavigation取代了backgroundColor，或者卸载了以前的屏幕。

This is what I've have so far:

这是我到目前为止所拥有的：

//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;

回答by Mugen

This was really changed in latest React Navigationversions. See

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

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

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

For example

例如

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>
  );
}

回答by Cristian Mora

With react-navigation v3.x You can use the transparentCard pro:

使用 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.
  }
);

You can find a complete example below:

您可以在下面找到完整的示例：

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

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

回答by Yammi

Add opacity:

添加不透明度：

cardStyle: {
  backgroundColor: "transparent",
  opacity: 1
}

回答by Ashoat

As of [email protected]there is a config option transparentCardthat makes this possible.

截至目前，[email protected]有一个配置选项transparentCard使这成为可能。

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

This won't blur the background for you; it will just make it transparent. To properly blur it, you'll need to do something like this. Make sure you start the background way above the top edge of the screen, since the card will animate in from the bottom, and you probably want the screen to gradually blur instead of the opacity having a sharp edge as it animates in.

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

回答by Bright Lee

Since you want 'Modal', you can use 'Modal' built in react-native.

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

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

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

回答by alem.kh

this way worked for me:

这种方式对我有用：

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

);