탭 네비게이터가있는 스택 네비게이터 (고유 네이티브)

Question

Screen1과 Screen2가 이미 탭 네비게이터에있을 때 stack1을 사용하여 screen1 -> screen2에서 가져 오려고합니다. 몇 가지 문제가 있습니다. 여기 내 App.Js (세부 사항 제거) 내 화면 1에서

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; 

, 나는 현재 클래스 화면 1을 수출하고 있습니다, 그래서 코드를 실행할 때, 나는 '탐색'은 찾을 수 없다는 오류를 얻을 내가 선

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 }, 
 
});