16

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

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

  • アンドロイド
  • React ネイティブ: 0.47.1
  • React ナビゲーション: 1.0.0-beta.11
  • エミュレーターとデバイス

モーダルフォームとして機能する画面がありますが、実際にはフルスクリーンです。「モーダルフォームとして機能する」という部分が重要なのはなぜですか？これは、いくつかのオプションとWITH A TRANSPARENT Background COLORを備えた一種のモーダル メニューであるためです。

これは私が期待するものです：

ここに画像の説明を入力

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

ここに画像の説明を入力

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

反応ナビゲーションを使用して達成できない場合、他にどのような方法がありますか?

PureComponentこのコンポーネントはクロスアプリコンポーネントであり、内部に多くのメカニズムとロジックをカプセル化するため、アクション (redux) を実行します。そのため、これを利用するコンポーネントの中継として使用することはできません。少なくとも、このコンポーネントを 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;
4

8 に答える 8

0

「モーダル」が必要なので、react-native に組み込まれている「モーダル」を使用できます。

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

于 2018-01-15T10:47:38.313 に答える
0

headerBackgroundon を設定するなど、私にとって最も簡単に思えるものを投げるだけですscreenOptions。

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

これは透過的なヘッダーでは機能しません。実際には、そもそもそれが原因である可能性があります。その場合、このようにアプリ コンテナ全体を View にラップするだけです。

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.

于 2021-01-21T01:40:48.607 に答える
0

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

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

);
于 2020-01-22T15:33:09.887 に答える
0

現在、これを可能にするreact-navigation@2.17.0構成オプションがあります。transparentCard

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

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

于 2018-11-05T14:36:53.473 に答える