(也在https://github.com/react-navigation/react-navigation/issues/4059#issuecomment-453100740问)
我已经用动态替换了一个静态TabNavigator,事情似乎有效.
但是,按预期传递的道具不再以相同的方式传递.
知道如何解决这个问题吗？通过在静态解决方案中传递道具,或通过传递所需的道具(this.props.navigation).
这是我的顶级导航器：
export default createDrawerNavigator({
Drawer: MainDrawerNavigator,Main: MainTabNavigator
},{
contentComponent: props => 这是静态选项卡导航器和其中一个堆栈：
const ProfileStack = createStackNavigator({
Profile: {
screen: Profile,navigationOptions: () => ({
title: 'Profile'
})
}
},{
initialRouteName: 'Profile'
});
ProfileStack.navigationOptions = {
tabBarLabel: 'Profile',tabBarIcon: ({ focused }) => (
和配置文件屏幕：
import React from 'react';
import { View,TouchableOpacity } from 'react-native';
import { Container,Header,Content,Text
} from 'native-base';
export default class Profile extends React.Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
}
render() {
console.log('in Profile. this.props:');
console.log(this.props);
return (
单击“md-more”图标将打开抽屉(this.props.navigation.openDrawer).
使用动态选项卡导航器 – openDrawer不再传递给’Profile’.
当我用以下动态替换上面的静态选项卡导航器时,不会传递this.props.navigation.openDrawer,因此未在“配置文件”中定义(配置文件不会更改,更改仅在底部选项卡导航器中).
这是动态Tab导航器：
export default class DynamicTabNavigator extends React.Component {
constructor(props) {
super(props);
}
_tabNavigator() {
let tabs = {};
const a = 2;
if (a > 1) { // the actual line is obvIoUsly different,I am trying to simplify the example
tabs = { RequestStack,ManageStack,MessagesStack,ProfileStack };
} else {
tabs = { WorkStack,ProfileStack };
}
console.log('in _tabNavigator. this.props.navigation:');
console.log(this.props.navigation);
return createBottomTabNavigator(tabs,{
headerMode: 'none',});
}
render() {
const Tabs = this._tabNavigator.bind(this)();
return (
这是DynamicTabNavigator的console.log()输出：
in _tabNavigator. this.props.navigation:
Object {
"actions": Object {
"closeDrawer": [Function closeDrawer],"goBack": [Function goBack],"navigate": [Function navigate],"openDrawer": [Function openDrawer],"setParams": [Function setParams],"toggleDrawer": [Function toggleDrawer],},"addListener": [Function addListener],"closeDrawer": [Function anonymous],"dangerouslyGetParent": [Function anonymous],"dispatch": [Function anonymous],"getChildNavigation": [Function getChildNavigation],"getParam": [Function anonymous],"getScreenProps": [Function anonymous],"goBack": [Function anonymous],"isFocused": [Function isFocused],"navigate": [Function anonymous],"openDrawer": [Function anonymous],"router": undefined,"setParams": [Function anonymous],"state": Object {
"key": "Main","params": undefined,"routeName": "Main","toggleDrawer": [Function anonymous],}
当DynamicTabNavigator到位时,这是来自Profile的console.log()的输出：
(我希望所有道具,例如openDrawer,与DynamicTabNavigator相同,我不明白它们为什么不是)
in Profile. this.props:
Object {
"appMode": "WORK_MODE","navigation": Object {
"actions": Object {
"dismiss": [Function dismiss],"pop": [Function pop],"popToTop": [Function popToTop],"push": [Function push],"replace": [Function replace],"reset": [Function reset],"dismiss": [Function anonymous],"pop": [Function anonymous],"popToTop": [Function anonymous],"push": [Function anonymous],"replace": [Function anonymous],"reset": [Function anonymous],"state": Object {
"key": "id-1547113035295-8","routeName": "Profile","screenProps": undefined,}
关于@ dentemm解决方案的问题：
我不确定如何实施您的解决方案……
>假设我在TabRoutes中有您在示例中指定的三个屏幕
>在我的redux状态下,我有一个名为’appState’的变量.如果确实如此,我想首先显示&第二,如果假的第一个&第三.
>这是我根据您的示例编写的代码.但是,我不确定CustomTabBar中包含哪个组件.你能详细说说吗？
import React from 'react';
class CustomTabBar extends React.Component {
render() {
// a tab bar component has a routes object in the navigation state
const { navigation } = this.props;
// appState is extracted from redux state,see below
if (this.props.appState) {
return (
最佳答案
您也可以保留TabNavigator,并使用自定义TabBarItem组件创建自定义TabBar组件.您可以将该自定义TabBar连接到redux状态,并根据需要隐藏/显示自定义TabBarItems.
然后,您只需像往常一样将所有可能的路线添加到TabNavigator.
路线
const TabRoutes = createBottomTabNavigator({
First: {screen: SomeScreen},Second: {screen: SomeStack},Third: {screen: AnotherStack}
},{
initialRouteName: 'First',tabBarComponent: CustomTabBar
});
CustomTabBar
关于如何隐藏标签栏项目的一些基本示例,显然这需要根据您自己的要求进行调整
import CustomTabBarItem from '...' ;
class CustomTabBar extends React.Component {
render() {
// a tab bar component has a routes object in the navigation state
const {navigation,appState} = this.props;
const routes = navigation.state.routes;
return (
CustomTabBarItem
class CustomTabBarItem extends React.PureComponent {
render() {
const {name,focused} = this.props;
return (
