反応ナビにStackNavigatorで追加された画面が表示されない

Question

ここではネイティブの初心者が反応します。 React-Native in TypescriptのTabNavigationでStackNavigationを動作させようとしています。私のアプリには3つの画面があります。 FirstScreenとSecondScreenがタブとして表示され、FirstScreenの「ここをクリック」ボタンをクリックすると、PopScreenが表示されます。 this.props.navigation.navigate("Pop")コールオンボタンのクリックはエラーなしで失敗したようですが、falseを返します。

import React from "react"; 
import { View, Text, Button } from "react-native"; 
import { StackNavigator } from 'react-navigation'; 
import { TabNavigator, NavigationStackScreenOptions } from 'react-navigation'; 

class FirstScreen extends React.Component<any, any> { 
    render() { 
     return (
      <View> 
       <Text>My First Tab Screen!!!</Text> 
       <Button 
        title="Click Here" 
        onPress={() => this.props.navigation.navigate("Pop"); } /> 
      </View> 
     ); 
    } 
} 

class SecondScreen extends React.Component<any, any> { 
    render() { 
     return (
      <Text>My Second Tab Screen</Text> 
     ); 
    } 
} 

class PopScreen extends React.Component<any, any> { 
    render() { 
     return (
      <View> 
       <Text>Content in pop up.</Text> 
      </View> 
     ); 
    } 
} 

const TabOptions = TabNavigator({ 
    MyFirst: { screen : FirstScreen }, 
    MySecond: { screen : SecondScreen } 
}); 

class TabOptionsScreen extends React.Component<any, any> 
{ 
    static navigationOptions : NavigationStackScreenOptions = { 
     header: null 
    }; 

    render() { 
     return (<TabOptions />) 
    } 
} 

export const App = StackNavigator ({ 
    Home : { screen: TabOptionsScreen }, 
    Pop: { screen: PopScreen } 
}) 

this.props.navigationオブジェクトがnullまたはFirstScreenクラスで未定義ではないですが、何とかそれはStackNavigatorに渡されたオプションを認識しません：

は、ここに私のコードです。どうすればnavigateメソッドをTabNavigatorの子画面で動作させることができますか？

Answer 1

読んだあと、this.props.navigatorは使用されているナビゲータ専用です。 TabNavigatorのnavigatorはタブを切り替えるために使用でき、StackNavigatorのnavigatorは画面を押し込むか画面のスタックからポップすることができます。ナビゲータの画面は、親からのnavigatorオブジェクトを継承しますが、画面の階層構造には深くは通されません。したがって、2つのソリューションがあります：

最初の解決策はGuilhermeが提案したものとほぼ同じですが、TabNavigatorでnavigationOptionsを渡す代わりに、関連する画面のStackNavigatorで渡しました。

const TabOptions = TabNavigator({ 
    MyFirst: { screen : FirstScreen }, 
    MySecond: { screen : SecondScreen } 
}); 
// TabOptionsScreen class removed here. 
// TabOptions constant is directly passed in StackNavigator. 
export const App = StackNavigator ({ 
    Home : { 
     screen: TabOptions, 
     navigationOptions : { 
      header: null 
     } 
    }, 
    Pop: { screen: PopScreen } 
}) 

これで、FirstScreenコンポーネントでthis.props.navigation.navigate("Pop")を使用できます。また、同じレベルで利用できる他のタブ（this.props.navigation.navigate("MySecond")）に移動することもできます。

私の元のコードでは、すべての画面を別々のファイルに書きましたが、画面のnavigationOptionsを独自のクラス定義に保ちたいと思っていました。したがって、第2の解決策は、このモジュラーアプローチに関するものです。このコードで

export class FirstScreen extends React.Component<any, any> { 
    render() { 
     const { navigate } = this.props.screenProps.navigation; 
     return (
      <View> 
       <Text>My First Tab Screen!!!</Text> 
       <Button 
        title="Click Here !!!" 
        onPress={() => navigate("Pop") }/> 
      </View> 
     ); 
    } 
} 

const TabOptions = TabNavigator({ 
    MyFirst: { screen : FirstScreen }, 
    MySecond: { screen : SecondScreen } 
}); 

export class TabOptionsScreen extends React.Component<any, any> 
{ 
    static navigationOptions : NavigationStackScreenOptions = { 
     header: null, 
    }; 

    render() { 
     return (<TabOptions screenProps={{ navigation: this.props.navigation }} />) 
    } 
} 

export const App = StackNavigator ({ 
    Home : { screen: TabOptionsScreen }, 
    Pop: { screen: PopScreen } 
}) 

、TabOptionsScreenはStackNavigatorの直接の子であるので、navigationオブジェクトはまた、それに渡されますが、今は手動でTabOptionsナビゲータでnavigationオブジェクトを渡す必要があります。 screenPropsは、親コンポーネントから子への小道具を渡すために使用できます。 FirstScreenでは、スタックナビゲーションにはthis.props.screenProps.navigation、タブナビゲーションにはthis.props.navigationを使用します。