web-dev-qa-db-ja.com

スクリーンを切り替えるときの白い背景の点滅 - React-Navigation V5

RNプロジェクトバージョン4から5を移行しています。

スクリーンを切り替えるときは、白い背景が点滅している問題がありました。v4では、これはStackNavigationオプションに_cardStyle: { backgroundColor: material.containerBgColor }_を設定することによって解決されました。

しかし、V5では同じアプローチで修正できません。

_<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>_

白い点滅が戻ってきました。その修復方法はどれかの考えですか？ありがとう。

更新：ナビゲーションの構造は重要かもしれません：

_const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>
_

ScreeendからScreeneに進んで点滅の問題があります。私は彼らがネットワーク要求/非同期のものを作らないので、他のスクリーンについてはよくわかりません。

react-nativereact-navigationreact-navigation-stack
11
haxpanel

Tab NavigatorのSingeNimationEnabledを無効にすることで問題を解決しました。

<Tab.Navigator
  sceneAnimationEnabled={false}>
  {...}
</Tab.Navigator>
 _
2
Roshan Maddumage

cardStyleナビゲータではなく、画面上のオプションです。

<Stack.Navigator screenOptions={{ cardStyle: backgroundColor: material.containerBgColor }}>
  {/* ... */}
</Stack.Navigator>
 _

または

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={AppTabNavigator}
    options={{ cardStyle: backgroundColor: material.containerBgColor }}
  />
  {/* ... */}
</Stack.Navigator>
 _

参照： https://reactnavigation.org/docs/en/next/stack-navigator.html#cardStyle

おそらくより良い方法では、テーマシステムを使用してすべてのナビゲータのためにそれを指定するのではなくあなたの色を渡すことです. https：//reactnavigation.org/docs/en/next/themes.html

1
satya164
const App = () => (
  <View style={styles.appStyle}>
     <Navigation />
  </View>
);
 _
const styles = StyleSheet.create({
  appStyle: { flex: 1, backgroundColor: "#000" }
});
 _
1
saksh73

lazy={false}コンポーネントで<Tabs.Navigator>を設定することでこれを解決しました。

<Tabs.Navigator
    lazy={false}
>
0
angeldroth

私は同じ問題に直面し、調査に分かれました。スクリーンの取り外しがそれを引き起こすようです。私はいくつかのアプローチを見つけました。あなたはあなたのニーズに応じて選ぶことができます。それらは次のとおりです。

  1. 次のようなスクリーンと同じ背景色を持つナビゲータのビューラッパーを指定できます。

    <View style={{ flex: 1, backgroundColor: '#YOUR_SCREEN_COLOR' }}>
  // It could be your NavigationContainer or your StackNavigator depends on your goals 
  <Navigator /> 
</View>
 _

  2. スタックビューの設定では、画面モードをmodalにすることもできます。これにより、画面が切り離されるのを防ぎます。

    <StackNavigator.Navigator mode="modal">
  {/*.... Your stack screens ... */}
</StackNavigator.Navigator>
 _

  3. screenOptions propを使用して、カスタムオーバーレイをcardOverlayに追加できます。

    cardOverlay: () => (
  <View
    style={{
    flex: 1,
    backgroundColor: '#YOUR_COLOR',
  }}
/>)
 _

    参照： https://reactnavigation.org/docs/stack-navigator/##cardoverlay

  4. cardStyleInterpolatorを使用できます。

    これにより、画面から画面に移動するときにアニメーショントランジションをカスタマイズできます。

    元のドキュメントからのスニペットは次のとおりです。

    const forFade = ({ current, closing }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});
 _
    <Stack.Screen
  name="Profile"
  component={Profile}
  options={{ cardStyleInterpolator: forFade }}
/>
 _

    スタックナビゲータは、画面が追加または削除されたときに遷移アニメーションを設定するためにさまざまなオプションを公開します。

    参照： https://reactnavigation.org/docs/tack-navigator/#animation-related-options

0
nikolay.hristov