React Navigation：スタック内の最初のカードのページ遷移をアニメーション化する

Question

私はリアクションネイティブのアプリケーションを構築し、React-Navigationをルータとして使用しています。私のコンポーネントのいくつかには派手なページ遷移が必要なので、React-Navigationからのコンポーネントを使ってカスタムトランジスターを実装しました。スタック内に1つ以上のルートがある限り、ナビゲータでページ遷移アニメーションを使用できます。私は、このパターンがStackNavigator、TabNavigatorなどのデフォルトのナビゲータにも存在することに気付きました。ナビゲータの最初のルートは決してページ遷移を持たないようです。例：

const ExampleNavigator = StackNavigator({ 
    home: { screen: HomeScreen }, 
    test: { screen: TestScreen }, 
    introduction: { screen: IntroductionScreen }, 
}) 

TestScreenとIntroductionScreenは、スタックナビゲータで定義された標準のスライド遷移を持ちますが、ホーム画面には表示されません。私の質問は、最初の画面でもページ遷移を適用するにはどうすればいいですか？

Answer 1

最初にが読み込まれると、スプラッシュページからの移行が行われますが、アプリはバックグラウンドからロードするときに最後の既知の画面を読み込むだけです。典型的なユーザーエクスペリエンスではありませんが、あなたが望む効果をもたらすために、移行したいどのようなルートの前にも空白の「プレスクリーン」を置くことができます。あなたがに移行するためにあなたのホーム画面をしたい場合は、このような何かを、あなたのStackNavigatorで次に

class PreScreen extends Component { 
    constructor(props) { 
    super(props); 
    // Immediately push the Home screen on to the stack 
    const { navigation } = this.props; 
    navigation.navigate('Home'); 
    } 
    render() { 
    return (
     <View style={{ flex: 1, backgroundColor: '#fff' }} /> 
    ) 
    } 
} 

これは、おかげで仕事ができる

const RootNavigator = StackNavigator({ 
    PreScreen: { 
    screen: PreScreen, 
    }, 
    Home: { 
    screen: HomeScreen, 
    navigationOptions: ({navigation}) => ({ 
     // Note: The PreScreen will still be a valid route so I'm just hiding the back button here. 
     headerLeft: null 
    }) 
    } 
});