如何使用react-native将this.props传递到js文件

Question

我正在使用react-native制作auth组件。
下面的代码发送到“ this.props.navigation”的“ MainTab”取决于axios的结果。

   <TouchableOpacity onPress={this.handleSubmit}>
       <Text>Save</Text>
   </TouchableOpacity>

   handleSubmit = () => {
       const result = await axios.post(
           'http://192.0.0.1:4000/clients',
            users
           );

       if (result.data.success) {
          return this.props.navigation.navigate('MainTab');
       }
       return false
   };

但是我想在另一个“ js”文件中使用handleSubmit以避免重复执行。
因此，我编辑如下代码。

import { saveSettings } from '../../storage/settingsStorage'

handleSubmit(): void {
    saveSettings(this.state);
}


// in 'settingsStorage.js'

export const saveSettings = async users => {
  try {
    const result = await axios.post(
      'http://192.0.0.1:4000/clients/token',
      users
     );

    if (result.data.success) {
      return this.props.navigation.navigate('MainTab');
    }
    return false
  } catch (e) {
    console.log(e);
  }
};

在这种情况下，我知道在不传递道具的情况下无法在普通Js文件中传递“ this.props”。
但是我不知道如何传递道具？
非常感谢您阅读本文。

Answer 1

根据您的描述，我认为您可以向saveSettings添加第二个参数， saveSettings navigation对象传递给以下对象：

import { saveSettings } from '../../storage/settingsStorage'

handleSubmit(): void {
    saveSettings(this.state, this.props.navigation);
}


// in 'settingsStorage.js'

export const saveSettings = async (users, navigation) => {
  try {
    const result = await axios.post(
      'http://192.0.0.1:4000/clients/token',
      users
     );

    if (result.data.success) {
      return navigation.navigate('MainTab');
    }
    return false
  } catch (e) {
    console.log(e);
  }
};

Answer 2

除了可以使用导航道具以外，您还可以使用没有官方网站中介绍的导航道具的导航技术。

App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator({
  /* ... */
});

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

我们定义了NavigationService，它是一个简单的模块，具有调度用户定义的导航操作的功能。

/ NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

现在在没有导航道具的任何地方使用它

// any js module
import NavigationService from 'path-to-NavigationService.js';

// ...

NavigationService.navigate('MainTab');