Javascript 在路由中的一个组件中调用函数

假设我有这个：

const navtest = StackNavigator({
    Home: {screen: HomeScreen},
    Stuff: {screen: Screen2},
    Stuff2: {screen: Screen3},
});

我现在正在看玩偶2/屏幕3。我的主屏幕组件中有一些功能，比如XYZ（）。基于我当前路线上的任何特定操作（屏幕3），我如何在主屏幕中调用该函数XYZ（）

我的路由文件直接链接到index.js

import {AppRegistry} from 'react-native';
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import HomeScreen from './HomeScreen';

const navtest= StackNavigator({
    Home: {screen: HomeScreen},
    Stuff: {screen: Screen2},
    Stuff2: {screen: Screen3},
});
AppRegistry.registerComponent('navtest', () => navtest);

在我的主屏幕文件中

 export default class HomeScreen extends Component {
        constructor(props){
            super(props);
            this.state = {one: '0'};
        }

        static navigationOptions = {
            header: null,
        };

        functionToPass() {
            console.log('Function accessed');
            this.setState({one: 'X'});
        }

        render() {
            const {navigate} = this.props.navigation;
            return (
                <View>
                    <TouchableOpacity onPress = {() => navigate('Stuff', {ABC: 'abc'})}>
                        <Text>
                            {this.state.one}
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

导出默认类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
this.state={one:'0'}；
}
静态导航选项={
标题：null，
};
functionToPass（）{
log（'Function accessed'）；
this.setState（{one:'X'}）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
导航（'Stuff'，{ABC:'ABC'}）}>
{this.state.one}
);
}
}

您是否正在从主页导航到屏幕3？然后可以将函数作为参数向下传递，以便在导航状态下可用。例如，

this.props.navigation.navigate（'Stuff2'，{someFunc:someFuncFromHome}）然后，在屏幕3中，可以像这样调用函数：
this.props.navigation.state.params.someFunc（）

如果Home不是前一个路由，那么可能应该在Home组件之外提取函数，并使用redux操作或类似的操作来实现相同的结果


后续行动：
我认为有几种方法可以帮助你

1） 向你的应用程序介绍Redux。这是redux的一个很好的用例，因为这种状态可以在应用程序中的任何位置进行操作。从应用程序中的任何位置发送相同的redux操作，主屏幕可以读取redux

2） 如果你还不想在你的应用程序中使用redux，也许你可以在导航器包装器组件中保留状态，就像我前面评论中的一样

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { one: '0' };
  }

  yourRootChangeFunc() {
    this.setState({ one: 'X' });
  }

  render() { 
    return <App screenProps={{ rootChange: this.rootChange, one: this.state.one }} /> 
  } 
}

然后在Screen2组件中：

export default class HomeScreen extends Component {
  ...
  componentWillMount() {
    this.props.navigation.setParams({ one: '0' });
  }

  render() {
    const { state: { params = {} } = this.props.navigation;
    return (
      ...
      <View>
        {params.one || '0'} // this is because currently there is no way to set a default params for a route
      </View>
      ...
    );
  }
}

import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
} from 'react-native';
import { NavigationActions } from 'react-navigation';

export default class Screen2 extends Component {
  onPress = () => {
    const setParamsAction = NavigationActions.setParams({
        params: { one: 'X' },
        key: this.props.navigation.state.params.homeKey,
   })
   this.props.navigation.dispatch(setParamsAction)
 }

 render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onPress}>
          <Text>Screen2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

import React，{Component}来自'React'；
进口{
看法
可触摸不透明度，
文本，
}从“反应本机”；
从“react navigation”导入{NavigationActions}；
导出默认类Screen2扩展组件{
onPress=（）=>{
const setParamsAction=NavigationActions.setParams({
参数：{one:'X'}，
key:this.props.navigation.state.params.homeKey，
})
this.props.navigation.dispatch（setParamsAction）
}
render（）{
返回(
屏幕2
);
}
}

这样，按Screen2中的Screen2文本将更改主屏幕的参数。然后回到主屏幕，我们可以看到文本从“0”更改为“X”。
这可以像
onPress={（）=>navigate（'Stuff'，{callFunction:（）=>This.reqFunction（）}
但是假设你有一个10条路线的堆栈。或者更多。如果你必须调用所有这些函数，这些函数将调用它们以前路线的函数，那将是非常难看的。我曾经用以前的react native navigator做过类似的事情，将该函数作为导航器的道具。
然后调用它，
this.props.navigator.props.mainFunction（）
我想可能是
dispatch（）
function可以这样做吗？对于导航器中的所有页面，您的main函数都是相同的吗？或者每个页面都有不同的函数可以传递到下一页吗？如果main函数应该是导航器中任何位置都可以使用的整体函数，那么您可以使用屏幕道具simi将其传递给导航器lar到它以前的工作方式。例如，const App=StackNavigator（{…}）；return；您能在这里更好地解释一下您的用例吗？我认为我没有正确地理解它。从我可以看出，rootchanger函数不应该存在于主屏幕上，因为它是主页组件上的一个函数，您希望在任何地方都可以访问。也许我们可以做一些事情，比如将函数定义为实例方法将导航器作为组件。例如类应用程序扩展组件{yourRootChangeFunc（）{}render（）{return}}如果我没有像我希望的那样提供帮助，很抱歉。编辑了我上面的回答和后续内容。希望有帮助！