Question

我已经在MainTabNavigator上进行了设置。如果我只单击底部导航器本身，它就可以正常工作。

MainTabNavigator.js

import React from "react";
import { Platform } from "react-native";
import {
  createStackNavigator,
  createBottomTabNavigator,
  createDrawerNavigator
} from "react-navigation";

import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/main/HomeScreen";
import SettingsScreen from "../screens/main/SettingsScreen";
import InProgressScreen from "../screens/main/InProgressScreen";
import LeftSliderScreen from "../screens/main/LeftSliderScreen";
import { addHeaderLeftNavigator } from "../helpers";
import ChangePassword from "../screens/main/profile/ChangePassword";
import EditProfile from "../screens/main/profile/EditProfile";
import { Icon } from "native-base";

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  ChangePassword,
  EditProfile,
  InProgress: InProgressScreen
});

/* eslint-disable react/prop-types, react/display-name */
HomeStack.navigationOptions = {
  tabBarLabel: "New SR",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === "ios"
          ? `ios-information-circle${focused ? "" : "-outline"}`
          : "md-information-circle"
      }
    />
  )
};

const SettingsStack = createStackNavigator({
  Settings: {
    screen: InProgressScreen,
    navigationOptions: ({ navigation }) => {
      const headerLeftNav = addHeaderLeftNavigator(navigation);
      const { params } = navigation.state;
      return {
        ...headerLeftNav,
        headerRight: (
          <Icon
            type="FontAwesome5"
            name="circle"
            size={24}
            onPress={() => {
              params._setModalVisible(true);
            }}
            style={{
              marginRight: 15,
              marginTop: 0,
              color: params && params.driver_status ? "lightgreen" : "red"
            }}
          />
        ),
        title: "Service Request",
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#2495C1",
          borderBottomColor: "#ffffff",
          borderBottomWidth: 0
        },
        headerTitleStyle: {
          fontSize: 18
        }
      };
    }
  }
});

SettingsStack.navigationOptions = {
  tabBarLabel: "In Progress",
  tabBarIcon: ({ focused }) => {
    return (
      <TabBarIcon focused={focused} name={Platform.OS === "ios" ? "ios-options" : "md-options"} />
    );
  }
};

const BottomTabNavigator = createBottomTabNavigator({
  HomeStack,
  SettingsStack
});

export default createDrawerNavigator(
  {
    BottomTabNavigator: BottomTabNavigator
  },
  {
    contentComponent: LeftSliderScreen
  }
);

但是在我的主屏幕上，我有一个数据供稿，当用户单击“接受”按钮时，该数据应重定向到“进度”选项卡。

如果我使用this.props.navigation.navigate('InProgress')，它会打开一个新的导航而不是更改选项卡，您可以告诉它，因为该选项卡的焦点不在InProgress选项卡上。

HomeScreen.js

_acceptingRequest = async id => {
    this.props.navigation.navigate("InProgress");

    return false;
....

Answer 1

我明白了，只是将参数名称设置为

const BottomTabNavigator = createBottomTabNavigator({
  HomeStack,
  InProgressTab: SettingsStack
});

这就是我需要打电话给的。现在，它更改了我的标签。

React Native：以编程方式更改bottomTabNavigator路线

1 个答案: