如何将 mapStateToProps / redux 添加到 react-navigation TabNavigator？

Posted 2023-02-23

【中文标题】如何将 mapStateToProps / redux 添加到 react-navigation TabNavigator？

【英文标题】：How to add mapStateToProps / redux to react-navigation TabNavigator?

【发布时间】：2018-08-07 05:28:53

【问题描述】：

我想构建这里显示的非常简单的示例：https://reactnavigation.org/docs/tab-based-navigation.html

import React from 'react';
import  Text, View  from 'react-native';
import  TabNavigator  from 'react-navigation'; // 1.0.0-beta.27

class HomeScreen extends React.Component 
  render() 
    return (
      <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Home!</Text>
      </View>
    );
  


class SettingsScreen extends React.Component 
  render() 
    return (
      <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Settings!</Text>
      </View>
    );
  


export default TabNavigator(
  Home:  screen: HomeScreen ,
  Settings:  screen: SettingsScreen ,
);

我将如何将选项卡导航器包装在 mapStateToProps（或任何堆栈导航器）中。例如，如果我想为特定选项卡使用动态选项卡名称。

谢谢。

【参考方案1】：

 const MainRoot =(props) => 
      const myTabbar = TabNavigator(
              Home: LoginForm,
              Settings: RegistrationForm,
              third: TabsView
               ,
               initialRouteName: props.myName
               
             );
       return <CustomTabNavigator/>;
 
 const mapStateToProps = state => (
          myName: state.LibraryMain,
 );
export default connect(mapStateToProps)(MainRoot)

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。