Tab Navigator（Reactネイティブ）のスタックナビゲータ

Question

Screen1とScreen2が既にタブナビゲータ内にあるときに、stacknavigatorを使用してscreen1 - > screen2から取得しようとしていますが、いくつか問題が発生しています。 はここにある私のApp.Js（詳細は削除）私のSCREEN1で

import Screen1 from "./screen1"; 
import Screen2 from "./screen2"; 

export const tabs = TabNavigator({ 
Tab1: { 
    screen:Screen1, 
    navigationOptions: { tabBarLabel: 'Test', tabBarIcon: ({ tintColor }) => <Icon name="doc" size={35} color={tintColor} />, 
    }, 
}, 
Tab2: { 
    screen:Screen2, 
    navigationOptions: { tabBarLabel: 'Profile', tabBarIcon: ({ tintColor }) => <Icon name="user" size={35} color={tintColor} />, 
}, 
} }); 

export default tabs; 

、私は現在、クラスSCREEN1を輸出していますので、私は、コードを実行したとき、私は「ナビゲート」が見つかりませんでしたというエラーが出ます私が行を持っていても

const { navigate } = this.props.navigation; 

私はスタックナビゲータ/タブナビゲータを自分で動作させることができましたが、一緒に置くと動作しません。代わりに、screen1クラスから「エクスポート」を削除した場合、App.JsからTab2（Screen2）の有効な反応画面を提供する必要があるというエラーが表示されます。

画面1（詳細は除去）

export default class screen1 extends React.Component { 
 
    static navigationOptions = { 
 
    title: 'Screen1', 
 
    } 
 
    render() { 
 
    const { navigate } = this.props.navigation; 
 
    return ( 
 
     
 
     ---- 
 
    this.props.navigation.navigate('SecondScreen'); 
 

 

 
    ); 
 
    } 
 
} 
 

 
export const SimpleApp = StackNavigator({ 
 
    screen1: { screen: screen1 }, 
 
    screen2: { screen: screen2 }, 
 
}); 
 
     
 
    

Answer 1

export default class screen1 extends React.Component { 
 
    static navigationOptions = { 
 
    title: 'Screen1', 
 
    } 
 
    render() { 
 
    const { navigate } = this.props.navigation; 
 
    return ( 
 
     
 
     ---- 
 
    // you need to use the key which is defined in stack navigator. 
 
    this.props.navigation.navigate('screen2'); 
 

 

 
    ); 
 
    } 
 
} 
 

 
export const SimpleApp = StackNavigator({ 
 
    screen1: { screen: screen1 }, 
 
    screen2: { screen: screen2 }, 
 
});