Question

我正在开发带有底部标签导航器的本机应用程序，并且希望导航选项取决于所显示的屏幕，例如：

AppNavigator.js：

class AppNavigator extends React.Component{
    isRouteEnabled = (routeName) => {
        return this.props.route == routeName;
    }

    render() {
        const tabNavigator = createBottomTabNavigator({
            Home: HomeScreen,
            Screen2: Screen2,
            // tab to be conditionally displayed
            ...(this.isRouteEnabled('Screen3') ? { Screen3 : Screen3} : {})
        });

        const AppNavigator = createAppContainer(tabNavigator);
        return <AppNavigator />
    }
}

我遇到的问题是访问此类中的 this.props ，当前始终未定义。如果可能的话，我希望它使用Redux存储中的值，但是，如果我将AppNavigator封装在 connect（）调用中，则使它的更高级别的组件导航根本无法正常工作（原因是不明白）：

const mapStateToProps = (state) => ({ route: state.route })
export default connect(mapStateToProps)(AppNavigator);

App.js 很简单：

export default class App extends React.Component {
    render() {
        return (
            <Provider store={appStore}>
                <AppNavigator />
            </Provider>
        );
    }
}

我是否缺少某些东西-导航器的动态行为是否可能取决于存储在redux中的值？

Answer 1

当前版本的React Navigation具有静态配置API，这意味着所有配置都必须在render外部完成。这使得诸如React Navigator 4之前的动态导航器之类的用例无法实现。

React Navigation 5具有一个新的基于组件的API，用于配置导航器，这使动态导航器成为可能：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  const isRouteEnabled = (routeName) => {
    return this.props.route == routeName;
  }

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Screen2" component={Screen2} />
      {isRouteEnabled('Screen3') && (
        <Tab.Screen name="Screen3" component={Screen3} />
      )}
    </Tab.Navigator>
  );
}

const mapStateToProps = (state) => ({ route: state.route });

export default connect(mapStateToProps)(AppNavigator);

文档：https://reactnavigation.org/next

请记住，React Navigation 5仍处于Alpha状态。

具有动态路由配置的TabNavigator / redux

1 个答案: