反应导航默认背景色 [英] React Navigation default background color

问题描述

我正在使用反应导航和堆栈导航器来管理我的屏幕.

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

我正在使用的平台:

• Android
• 本机反应:0.47.1
• 反应导航:1.0.0-beta.11
• 仿真器和设备

我有一个屏幕， 用作模态表格 ，但它实际上是一个全屏屏幕.为什么 充当模式形式" 的一部分很重要?那是因为它是一种模态菜单，带有一些选项，并且具有透明背景色.

I have a screen, which acts as a modal form but 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.

如您所见，在第二个示例中，背景色已被完全替换或先前装入的组件已卸载，因此我想要获得的效果消失了. 想法是能够像其他任何屏幕一样导航到该屏幕.

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.

如果无法使用反应导航"完成操作，我还可以采取其他方法吗?

此组件执行操作(redux)，因为它是跨应用程序组件，并且内部封装了许多机制和逻辑，这就是为什么我不能将其用作对使用此组件的组件的PureComponent中继.至少，将此组件设为PureComponent会迫使我在许多其他组件中复制许多机制和逻辑.

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 PureComponent relaying 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.

出于问题的考虑，并且为了避免使问题过于复杂，两个屏幕的样式都完全相同，但是按下StackNavigation的屏幕将替换backgroundColor，或者卸载先前的屏幕.

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 StackNavigation replaces the backgroundColor, or unmounts the previus screen.

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

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;

推荐答案

在最新的React Navigation版本中确实进行了更改.见

This was really changed in latest React Navigation versions. See

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

这篇关于反应导航默认背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！