[英]React Native: Change bottomTabNavigator route programmatically
I have this set up on my MainTabNavigator
. 我已经在MainTabNavigator
上进行了MainTabNavigator
。 It works fine if I just click the bottom navigator itself. 如果我只单击底部导航器本身,则效果很好。
MainTabNavigator.js 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
}
);
But on my HomeScreen I have a feed of data that when user click the accept button it should redirect to the InProgress tab. 但是在主屏幕上,我有一个数据源,当用户单击“接受”按钮时,该数据源应重定向到“进度”选项卡。
If I use this.props.navigation.navigate('InProgress')
it opens a new navigation instead of changing the tab and you can tell it because the tab is not focused on the InProgress tab. 如果我使用this.props.navigation.navigate('InProgress')
它将打开一个新的导航而不是更改选项卡,并且您可以告诉它,因为该选项卡没有集中在InProgress选项卡上。
HomeScreen.js HomeScreen.js
_acceptingRequest = async id => {
this.props.navigation.navigate("InProgress");
return false;
....
Ohh I got it just set the param name on 哦,我明白了,只是将参数名称设置为
const BottomTabNavigator = createBottomTabNavigator({
HomeStack,
InProgressTab: SettingsStack
});
And that's what I need to call instead. 那就是我需要打电话给的。 It changes the tab now my bad. 现在它改变了我的坏标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.