Question

在我的应用程序中，我想将我的createMaterialTopTabNavigator（常量NewTab）中的一些数据传递到两个子屏幕（图形和表格）。子屏幕中的数据根据在createMaterialTopTabNavigator上方的自定义标头中的下拉值而变化。一旦从下拉列表中选择了值，它将在图形和表格屏幕中触发获取请求。

这是我的App.js，用于路由所有屏幕。

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

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进行相同操作，但不确定如何做到这一点。

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

Answer 1

是的，您可以按照下面的方法在此处使用screenProps，但是我强烈建议您使用第三方来管理redux，mobx等状态，或者只是使用上下文

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

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道具获得该变量。我已经举了一个例子here

将道具传递到tabNavigator的屏幕

1 个答案: