`App.js`

Question

我试图在单击时将选项卡栏项之一作为模式打开，我目前正在使用expo。我读过这篇文章：How do i make a TabNavigator button push a modal screen with React Navigation。但是，我仍在学习React Native，老实说我不确定如何通过expo导航使用它。目前，我已经为每个屏幕使用“ createStackNavigator”创建了一个堆栈导航器。最后，我导出了一个底部标签导航器，其中包括所有堆栈：

导出默认的createBottomTabNavigator（{ Tab1Stack， Tab2Stack， Tab3Stack， Tab4Stack }）;

我需要打开Tab4作为模态。有人可以帮我吗？预先谢谢你！

Answer 1

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

所以我们可以这样设置：

`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内部defaultNavigationOptions内部的config函数。

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

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()，这将关闭模态。

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是这里的小吃，希望它能告诉您如何进行设置。

Answer 2

您可以现场直播example

import React, { Component } from 'react';

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

import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
} from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}
class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}
class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Modal Screen3!</Text>
      </View>
    );
  }
}

class Screen4 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen4!</Text>
      </View>
    );
  }
}

const App = createBottomTabNavigator(
  {
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
    Screen3: {
      screen: Screen3,
      navigationOptions: { header: null, tabBarVisible: false },
    },

    Screen4: {
      screen: Screen4,
      navigationOptions: {
        tabBarVisible: true,
      },
    },
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({}),
    tabBarOptions: {
      activeTintColor: '#000000',
      inactiveTintColor: '#606070',
    },
  }
);

export default createAppContainer(App);

React Modal中的本机打开选项卡栏（使用expo）

2 个答案:

`App.js`

`MainNavigation.js`

`Screen.js`

`ModalScreen`