Question

我试图从screen1获取 - ＆gt; screen2使用stacknavigator，当Screen1和Screen2已经在选项卡导航器中时，我遇到了一些问题。这是我的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;

在我的屏幕1中，我目前正在导出类屏幕1，所以当我运行代码时，我收到的错误是导航＆＃39;即使我有行

也无法找到

  const { navigate } = this.props.navigation;

我让堆栈导航器/标签导航器自行工作，但是当我把它们放在一起时它似乎无法工作。相反，如果我删除＆＃34;导出＆＃34;从screen1类，我从App.Js得到一个错误，说我需要为Tab2（Screen2）提供有效的反应屏幕。

Screen1（已移除详细信息）

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

使用Tab Navigator的堆栈导航器（React Native）

1 个答案: