在模式中反应本机打开的标签栏（使用expo）

Question

我正在尝试让其中一个选项卡栏项目在点击时以模式打开，我当前使用的是Expo。我读过这篇文章:如何使TabNavigator按钮通过React导航按下模式屏幕。然而，我仍然在学习React Native，我不知道如何使用expo导航。目前，我已经为每个屏幕使用“CreateStackNavigator”创建了一个堆栈导航器。最后，我导出了一个底部标签导航器，包括所有堆栈:

导出默认createBottomTabNavigator({Tab1Stack，Tab2Stack，Tab3Stack，Tab4Stack)；

我需要Tab4作为模式打开。有人能帮帮我吗？提前谢谢！！

Answer 1

要在 中点击最后一个选项卡时显示模式，需要将 嵌套在 中。

所以我们可以这样设置:

一个简单的 。

import React from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
    };
  }

  render () {
    return (
      <AppContainer />
    );
  }
}

这个文件包含两个导航器。一个 和一个 。 嵌套在 中。

为了能够显示 ，我们必须覆盖 options ode=""> 中的 函数，该函数位于TabNavigator的 中。

我们还需要检查 来查看我们正在导航的位置。如果我们要访问 ，我们可以截获调用并导航到 。否则，我们使用 并转到被点击的选项卡。

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import ModalScreen from './ModalScreen';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';

const screens = {
  Tab1: {
    screen: Screen1
  },
  Tab2: {
    screen: Screen2
  },
  Tab3: {
    screen: Screen3
  }
};

const config = {
  headerMode: 'none',
  initialRouteName: 'Tab1',
  defaultNavigationOptions: {
    tabBarOnPress: (data) => {
      // this is where the magic happens
      const { navigation, defaultHandler } = data;
      // we check to see if the navigation key is going to be on Tab3
      if (navigation.state.key === 'Tab3') {
        // if it is we show the ModalScreen by navigating to it
        navigation.navigate('ModalScreen');
      } else {
        // otherwise we call the defaultHandler and navigate to the tab we pressed
        defaultHandler(navigation.state.key);
      }
    }
  }
};

const TabNavigator = createBottomTabNavigator(screens, config);

const stackScreens = {
  Tabs: {
    screen: TabNavigator
  },
  ModalScreen: {
    screen: ModalScreen
  }
};

//we need to set the mode to be modal
const stackConfig = {
  headerMode: 'none',
  initialRouteName: 'Tabs',
  mode: 'modal'
};

const MainNavigator = createStackNavigator(stackScreens, stackConfig);
export default createAppContainer(MainNavigator);

每个选项卡的简单屏幕

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default class Screen extends React.Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>Tab Screen</Text>
      </View>
    );
  }
}

此屏幕是当点击第三个屏幕的选项卡时将出现的模式。因为它是上面定义的 的一部分，所以它可以访问导航道具。我们设置了一个简单的按钮，当按下该按钮时调用 ，这将取消模式。

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen extends React.Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>Modal Screen</Text>
        <Button
          title={'close modal'}
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

这里有一个正在工作的点心，https://snack.expo.io/@andypandy/show-modal-on-tab-press，希望它能向您展示如何设置它。