javascript - 在路由的组件之一中调用函数

假设我有这个：

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

而且我目前正在查看Stuff2 / Screen3。我的HomeScreen组件中有一些功能，例如XYZ（）。根据当前路线（Screen3）上的任何特定动作，如何在HomeScreen中调用该函数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);

并在我的HomeScreen文件中

 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>
            );
        }
    }

最佳答案

您是要从首页导航到Screen3吗？然后，您可以将功能作为参数传递下来，以在导航状态下可用。例如。 this.props.navigation.navigate(‘Stuff2’, { someFunc: someFuncFromHome });然后，在Screen3中，您可以调用如下函数：this.props.navigation.state.params.someFunc();

如果Home不是先前的路线，则可能应从Home组件外部提取函数，并使用redux动作或类似的操作来获得相同的结果。



跟进：
我认为有几种方法可以为您提供帮助。

1）将Redux引入您的应用。这是redux的一个很好的用例，因为可以从应用程序中的任何位置操纵此状态。从应用程序中的任何位置调度相同的redux操作，HomeScreen可以从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 }} />
  }
}

然后，您可以使用one在其他屏幕中访问this.props.screenProps.one

3）另一种方法是使用setParams，您可以通过输入路由键来为特定屏幕设置参数。

在HomeScreen组件中：

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>
      ...
    );
  }
}

然后在Screen2组件中：

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>
    );
  }
}

这样，在Screen2中按Screen2文本将更改HomeScreen的参数。然后，当返回HomeScreen时，我们可以看到文本从“ 0”更改为“ X”。

关于javascript - 在路由的组件之一中调用函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45120870/