1

我正在尝试在单击时将其中一个选项卡栏项目作为模式打开，我目前正在使用 expo。我读过这篇文章：如何让 TabNavigator 按钮使用 React Navigation 推送模态屏幕。但是，我仍在学习 React Native，老实说，我不确定如何使用 expo 导航来使用它。目前，我已经为每个屏幕使用“createStackNavigator”创建了一个堆栈导航器。最后，我导出了一个底部选项卡导航器，包括所有堆栈：

导出默认 createBottomTabNavigator({ Tab1Stack, Tab2Stack, Tab3Stack, Tab4Stack });

我需要 Tab4 作为模式打开。有人可以帮助我吗？先感谢您！！

4

1 回答 1

4

请注意，这是为 "react-navigation": "3.3.0" 构建的，因此对于最新版本的 Expo 和react-navigation.

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

所以我们可以这样设置：

#App.js

一个简单的App.js.

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

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

#MainNavigation.js

该文件包含两个导航器。一个TabNavigator和一个StackNavigator。TabNavigator嵌套在StackNavigator.

为了能够显示，ModalScreen我们必须覆盖TabNavigator内部的tabBarOnPress函数。defaultNavigationOptionsconfig

我们还需要检查navigation.state.key以查看我们正在导航的位置。如果我们要去，Tab3我们可以拦截呼叫并导航到ModalScreen。否则，我们使用defaultHandlerand 转到被点击的选项卡。

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

#Screen.js

每个选项卡的简单屏幕

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

#ModalScreen

此屏幕是点击第三个屏幕的选项卡时将出现的模式。由于它是StackNavigator上面定义的 的一部分，它可以访问导航道具。我们设置了一个简单的按钮，当按下时调用this.props.navigation.goBack()This 将关闭模式。

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，希望它能告诉你如何设置它。

于 2019-02-24T20:21:19.190 回答