web-dev-qa-db-ja.com

Reactナビゲーションのデフォルトの背景色

画面の管理に react-navigation とstack-navigatorを使用しています。

私が使用しているプラ​​ットフォーム：

  • Android
  • React Native：0.47.1
  • Reactナビゲーション：1.0.0-beta.11
  • エミュレーターとデバイス

画面がありますモーダルフォームとして機能しますですが、実際には全画面です。 "モーダルフォームとして機能する" の部分が重要なのはなぜですか？これは、いくつかのオプションと透明な背景色付きを備えた一種のモーダルメニューであるためです。

これは私が期待することです：

enter image description here

しかし、私が得ているのはこれです：

enter image description here

ご覧のとおり、2番目の例では、背景色が完全に置き換えられているか、以前にロードされたコンポーネントがマウント解除されているため、取得したい効果が失われています。 他の画面と同じようにこの画面に移動できるようにするのが目的です。

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;
javascriptandroidreact-nativereact-navigationstack-navigator
3
Facundo La Rocca

これは、最新の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>
  );
}
0
Mugen

この方法は私のために働いた：

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

);
0
alem.kh

[email protected]の時点で、これを可能にする構成オプションtransparentCardがあります。

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

これにより、背景がぼやけることはありません。透明にするだけです。適切にぼかすには、 this のようなことをする必要があります。カードは下からアニメーション化されるため、画面の上端より上から背景を開始するようにしてください。アニメーション化するときにエッジがシャープになる不透明度ではなく、画面を徐々にぼかしたい場合があります。

0
Ashoat

不透明度を追加します。

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