React-Navigation 3:使用 createBottomTabNavigator 和 createStackNavigator 打开模态

问题描述

我知道以前有人问过这个问题，但只针对旧版本的 react-navigation.从那时起，一些事情发生了变化.createBottomTabNavigator 可以更快地创建底部导航器，并且函数 jumpToIndex() 不再存在.

I know this question has been asked before, but only for older versions of react-navigation. Since then a few things have changed. createBottomTabNavigator makes it much faster to create a bottom navigator and the function jumpToIndex() doesn't exist anymore.

我的问题是如何创建一个类似于 Instagram 的底部标签，其中第一个、第二个、第四个和第五个导航按钮的作用类似于通常的标签导航器，中间按钮 (screen3) 打开模态 screen3Modal.

My Question is how to create an Instagram-like bottom tab, where the first, second, fourth and fifth navigation buttons act like usual tab navigators and the middle button (screen3) opens the modal screen3Modal.

我在 react-navigation 3.x.x 中尝试过，使用 createBottomTabNavigator 和 createStackNavigator.

I have tried it in react-navigation 3.x.x, using createBottomTabNavigator and createStackNavigator.

import React, { Component, } from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer, } from 'react-navigation';
import { Screen1, Screen2, Screen3, Screen4, Screen5 } from './screens';

const TabNavigator = createBottomTabNavigator({
  screen1: { screen: Screen1, },
  screen2: { screen: Screen2, },
  screen3: { 
    screen: () => null, 
    navigationOptions: () => ({
      tabBarOnPress: () => this.props.navigation.navigate('screen3Modal')
    })
  },
  screen4: { screen: Screen4, },
  screen5: { screen: Screen5, },
});

const StackNavigator = createStackNavigator({
  Home: { screen: TabNavigator },
  screen3Modal: { screen: Screen3, },
},
{
  initialRouteName: 'Home',
});

const StackNavigatorContainer = createAppContainer(StackNavigator);

export default class App extends Component {
  render() {
    return <StackNavigatorContainer />;
  }
}

此代码创建选项卡导航和模式导航.模态可以从另一个屏幕打开，但它在选项卡导航器中不起作用.我收到错误消息 undefined is not an object (evaluating '_this.props.navigation')

This code creates the tab navigation and modal navigation. The modal can be opened from another screen, but it doesn't work from within the tab navigator. I get the errormessage undefined is not an object (evaluating '_this.props.navigation')

推荐答案

我找到了一个相对简单的解决方案:用 display:"none"

I have found a relatively easy solution:Hide the original navigation bar with display:"none"

const TabNavigator = createBottomTabNavigator(
  {
    screen1: Screen1,
    screen2: Screen2,
    screen4: Screen4,
    screen5: Screen5,
  }, {
    tabBarOptions: {
      style: { display: "none", }
    }
  },
);

const StackNavigator = createStackNavigator(
  {
    Home: TabNavigator,
    screen3: Screen3
  }, {
    mode: 'modal',
  }
)

export default createAppContainer(StackNavigator);

并在每个屏幕上创建一个新的导航栏

And create a new navigation bar on each screen

<View style={{ flexDirection: "row", height: 50, justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen1")}><Text>1</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen2")}><Text>2</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen3")}><Text>3</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen4")}><Text>4</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen5")}><Text>5</Text></TouchableOpacity>
</View>

这篇关于React-Navigation 3:使用 createBottomTabNavigator 和 createStackNavigator 打开模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！