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

Question

假设我有这个:

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

在我的主屏幕文件中

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

Answer 1

您是从 Home 导航到 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 }} /> 
  } 
}

然后你可以通过this.props.screenProps.one在其他屏幕访问one

3) 另一种方法是使用setParams，您可以通过传入路由的key来为特定的屏幕设置Params。

在 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 的参数。然后回到主屏幕，我们可以看到文本从“0”变为“X”。