React Native 的堆栈导航器和选项卡导航器出现问题

Question

我正在尝试从选项卡导航器导航到我的堆栈导航器上的屏幕，但出现此错误：

是否有特定的方法可以在进入选项卡导航器后导航回堆栈导航器？

这是我使用 onPress 的地方：

onPress={() => this.onProfileButtonPressed()}

onProfileButtonPressed 函数如下所示：

constructor(props){
    super(props);
    this.state = {
        filteredCellArray: [],
        masterCellArray: []
    };
    this.onProfileButtonPressed = this.onProfileButtonPressed.bind(this);
}

onProfileButtonPressed = () => {
    this.props.navigation.navigate('Profile', this);
    console.log("Profile Button Pressed");
};

下面是带有堆栈和选项卡导航器的路由器：

const TabNav = TabNavigator({
  Profile:{
    screen: Profile,
    tabBarOptions: {
      showLabel: false
    }
  },
  Books:{
    screen: BookTab
  },
  Tutors:{
    screen: TutorTab
  },
  Furniture:{
    screen: FurnitureTab
  },
  Roommate:{
    screen: RoommateTab
  },
  Carpool:{
    screen: CarpoolTab
  }},
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    initialRouteName: 'Books'
});

export const FeedStack = StackNavigator({
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Login"
    }
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Create An Account"
    }
  },
  ForgotPassword: {
    screen: ForgotPassword,
    navigationOptions: {
      title: "Forgot Password"
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      title: "Your Profile"
    }
  },
  TabNav: {
    screen: TabNav,
    navigationOptions: {
      title: "Home"
    }
  },
  listing: {
    screen: listing,
    navigationOptions: {
      title: "Listing"
    }
  }
})

Answer 1

我认为你的问题是目前你的 TabNavigator 在 StackNavigator 里面。它应该是相反的。

此外，由于您不想在所有视图中显示它（我想就像在注册时一样），您需要对其进行自定义。从文档中阅读有关隐藏 TabBar 的更多规范。

但标签的基本逻辑是堆栈在其中。

并且如果您将函数绑定到 constructor 内的作用域，那么您应该像这样引用它： onPress={this.onProfileButtonPressed}.

React Native 的堆栈导航器和选项卡导航器出现问题

Trouble with stack navigator and tab navigator for react native

javascript

react-native

expo