Question

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

我使用的平台：

的Android
React Native：0.47.1
React Navigation：1.0.0-beta.11
仿真器和设备

我有一个屏幕， 充当模式 ，但它实际上是一个全屏。为什么重要的是 ＆＃34;作为模式形式＆＃34; ？这是因为它是一种带有一些选项的模态菜单和 WITH WITH TRANSPARENT BACKGROUND COLOR 。

这就是我的期望：

但我得到的是：

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

如果使用反应导航无法完成，我还可采取其他方式吗？

该组件执行操作（redux），因为它是一个跨应用程序组件，并且内部封装了许多机制和逻辑，这就是为什么我不能将它用作组件的PureComponent中继的原因利用这一个。至少，将此Component作为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;

Answer 1

在最新的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>
  );
}

Answer 2

添加不透明度：

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

Answer 3

从Dictionary<string, string>开始，有一个配置选项react-navigation@2.17.0使之成为可能。

transparentCard

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

Answer 4

在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

Answer 5

这种方式对我有用：

              |switch| s1
                 |
              |switch|   s2
               /  \

       s3  |switch|  |switch|  s4
             |          |
           |Host|    |Host|

Answer 6

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

    <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，并且没有单独的深色主题，则只需在 backgroundColor 中设置 app.json。

Answer 7

由于您需要＆＃39; Modal＆＃39;，您可以使用＆＃39; Modal＆＃39;内置反应原生。

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

React Navigation默认背景颜色

这就是我的期望：

但我得到的是：

7 个答案: