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

根据您的描述，我认为您可以向object.on({ scaled: function() { // store new widht and height var new_width = this.getScaledWidth(); var new_height = this.getScaledHeight(); // remove object from canvas canvas.remove(this); // add new object with same size and original options like strokeWidth canvas.add(new ...); } });添加第二个参数，并将saveSettings对象传递给：

navigation

Answer 2

您可以使用官方网站中所述的Navigating without the navigation prop技术来代替传递导航道具。

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

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

2 个答案: