react-navigation無法顯示在StackNavigator中添加的屏幕

Question

React-Native初學者在這裏。我正在嘗試使用帶有Typescript的React-Native中的TabNavigation使StackNavigation工作。我的應用中有三個屏幕。 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對象不爲空或FirstScreen類不確定的，但不知它不承認在StackNavigator傳遞的選項。請幫助我如何讓navigate方法在TabNavigator的任何一個兒童屏幕上工作？

Answer 1

經過幾次讀取後，我意識到this.props.navigator是使用它的Navigator專用的。 TabNavigator中的navigator可用於在選項卡之間切換，並且StackNavigator中的navigator可將屏幕推入或從屏幕堆棧彈出。導航器中的屏幕會繼承父對象的navigator對象，但它們不會深入屏幕層次結構中。所以有兩種解決方案：

第一個解決方案几乎與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在它自己的類定義中。所以第二個解決方案就是這種模塊化方法

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對象也被傳遞到它，但現在我們必須手動傳遞navigation對象TabOptions導航。 screenProps可用於從父組件傳遞道具給兒童。在FirstScreen中，使用this.props.screenProps.navigation進行堆棧導航，使用this.props.navigation進行標籤導航。