[英]React Native: Change bottomTabNavigator route programmatically
我已經在MainTabNavigator
上進行了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;
....
哦,我明白了,只是將參數名稱設置為
const BottomTabNavigator = createBottomTabNavigator({
HomeStack,
InProgressTab: SettingsStack
});
那就是我需要打電話給的。 現在它改變了我的壞標簽。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.