首页 文章

使用Tab Navigator的堆栈导航器(React Native)

提问于
浏览
0

我试图从screen1 - > screen2使用stacknavigator,当Screen1和Screen2已经在tab导航器中时,我遇到了一些问题 . 这是我的App.Js(详细信息已删除)

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中,我当前正在导出类screen1,所以当我运行代码时,我得到错误,即使我有这条线也无法找到'navigate'

const { navigate } = this.props.navigation;

我让堆栈导航器/标签导航器自己工作,但当我把它们放在一起时它似乎不起作用 . 如果相反,我从screen1类中删除“export”,我从App.Js得到一个错误,说我需要为Tab2(Screen2)提供有效的反应屏幕 .

Screen1(细节已删除)

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

1 回答

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

相关问题