将道具传递给 tabNavigator 的屏幕 [英] Passing props to tabNavigator's screens

问题描述

在我的应用程序中，我想将 createMaterialTopTabNavigator (const NewTab) 中的一些数据传递给它的子屏幕(图形和表格).子屏幕中的数据根据​​ createMaterialTopTabNavigator 上方的自定义标题中的下拉值进行更改.一旦选择了下拉列表中的值，它就会在图形和表格屏幕中触发一个获取请求.

In my app, I want to pass some data in my createMaterialTopTabNavigator (const NewTab) to both it's child screens (Graphical and Tabular). The data in child screens changes on the basis of the dropdown value in the custom header that will be above createMaterialTopTabNavigator. As soon as the value from the dropdown is selected, it will trigger a fetch request in both the Graphical and Tabular Screen.

这是我的 App.js，我在其中路由我的所有屏幕.

Here is my App.js where I am routing all my screens.

const NewTab = createMaterialTopTabNavigator({
  Graphical: Graphical,
  Tabular: Tabular
});


const DailyStack = createStackNavigator({
  Dashboard,
  Daily,
  Login,
  SalesDashboard,
  About : {
    screen: NewTab, 

      navigationOptions : {
        header : <CustomHeader />
      }
  }
})


const MonthlyStack = createStackNavigator({
  Monthly: Monthly
})



const RangeStack = createStackNavigator({
  Range: Range
})



export const BottomTabNavigation = createBottomTabNavigator({
  Daily: {
    screen: DailyStack
  },
  Monthly: {
    screen: MonthlyStack
  },
  Range: {
    screen: RangeStack
  }
})



const DashboardStackNavigator = createStackNavigator({
  BottomTabNavigation:BottomTabNavigation,
}, {
  headerMode: 'none'
})


export const AppDrawerNavigator = createDrawerNavigator({
  DashboardStackNavigator,
  Login: {
    screen: Login
  },
  Logout: {
    screen: Logout
  }
})


const OpenNav = createSwitchNavigator({
  Splash: {screen: SplashScreen},
  Login: { screen: Login },
  Home: { screen: Home }

})


const AppNavigator = createStackNavigator({

  OpenNav,
  AppDrawerNavigator: { screen: AppDrawerNavigator },
  ClaimsDashboard: ClaimsDashboard
},{
  headerMode:'none'
});

class App extends Component {

  constructor(){
    super();

    console.disableYellowBox = true;
  }


  render() {
    return (
      <AppContainer />
    );
  }
};


const AppContainer = createAppContainer(AppNavigator);

export default App;

CustomHeader.js

CustomHeader.js

import React, { Component } from 'react'
import { Text, View, Picker } from 'react-native'
import Icon from 'react-native-vector-icons/AntDesign'



    export default class CustomHeader extends Component {

      constructor(props) {
        super(props)

        this.state = {
          user: ''
        }
      }

      updateUser = (user) => {
        this.setState({ user: user })
     }


      render() {
       return (
          <View>
            <Icon name="arrowleft" size={30} onPress={navigation.goBack()} />

            <View>
            <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
                   <Picker.Item label = "Steve" value = "steve" />
                   <Picker.Item label = "Ellen" value = "ellen" />
                   <Picker.Item label = "Maria" value = "maria" />
                </Picker>
            </View>
          </View>
        )
      }
    }

考虑到 App.js 中包含的所有文件，我尝试使用 screenprops 来做同样的事情，但不知道如何去做.

Considering all files included in App.js, I tried using screenprops for the same, but is not sure how to do it.

迫切需要解决方案.请帮忙.

In dire need for solution. Please help.

推荐答案

是的，你可以在这里使用 screenProps ，就像我在下面所做的那样，但我强烈建议使用第三方来管理状态，比如 redux、mobx 等...或者只是使用上下文.

Yes, you can use screenProps here as I made below, but I strongly recommend using third party to manage state like redux, mobx, etc... or simply using context.

class DailyStackWithData extends React.Component {
 static router = DailyStack.router

 state = {
  user: 'steve'
 }

 setUser = user => this.setState({ user })

 componentDidMount(){
  this.props.navigation.setParams({ setUser: this.setUser });
 }

 render(){
  const { user } = this.state;
  const { navigation } = this.props;
  return (<DailyStack screenProps={user} navigation={navigation}/>)
 }
}

export const BottomTabNavigation = createBottomTabNavigator({
 Daily: {
  screen: DailyStack
 },
 ...
});

CustomHeader.js

CustomHeader.js

import React, { Component } from 'react';
import { Text, View, Picker } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import { withNavigation } from "react-navigation";

class CustomHeader extends Component {

    constructor(props) {
        super(props)

        this.state = {
            user: ''
        }
    }

    updateUser = user => {
        const setUser = this.props.navigation.getParam('setUser', () => {});
        setUser(user);
        this.setState({ user: user });
    }


    render() {
        return (
            <View>
                <Icon name="arrowleft" size={30} onPress={()=>{}} />
                <View>
                    <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
                        <Picker.Item label = "Steve" value = "steve" />
                        <Picker.Item label = "Ellen" value = "ellen" />
                        <Picker.Item label = "Maria" value = "maria" />
                    </Picker>
                </View>
            </View>
        )
    }
}

export default withNavigation(CustomHeader)

并且在 Graphical 或 Tabular 屏幕中，您可以通过 screenProps 道具获取该变量.我做了一个例子这里

and in Graphical or Tabular screen you can get that variable by screenProps props. I've made an example here

这篇关于将道具传递给 tabNavigator 的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！