【问题标题】:How to add mapStateToProps / redux to react-navigation TabNavigator?如何将 mapStateToProps / redux 添加到 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(或任何堆栈导航器)中。例如,如果我想为特定选项卡使用动态选项卡名称。

谢谢。

【问题讨论】:

    标签: javascript react-native react-router react-navigation tabnavigator


    【解决方案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)
    

    【讨论】:

    • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-06-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-27
    • 2020-02-16
    相关资源
    最近更新 更多