Question

我在我的本机应用程序上使用NavigatorIOS。我想在导航回上一个路线时传递一些属性。

示例案例：我在一个表格页面。提交数据后，我想回到之前的路线并根据提交的数据做一些事情

我该怎么做？

Answer 1

显示如何在pop之前使用回调的代码示例。这是专门针对Navigator而不是NavigatorIOS，但也可以应用类似的代码。

你有Page1和Page2。您正从Page1推送到Page2，然后弹回Page1。你需要从Page2传递一个回调函数，该函数触发Page1中的一些代码，然后才会弹出回到Page1。

在第1页 -

_goToPage2: function() {
  this.props.navigator.push({
    component: Page2,
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
    title: 'hey',
    callback: this.callbackFunction,
  })
},

callbackFunction: function(args) {
  //do something
  console.log(args)
},

在第2页 -

_backToPage1: function() {
  this.props.route.callback(args);
  this.props.navigator.pop();
},

在“pop”之前调用函数“callbackFunction”。对于NavigatorIOS，您应该在“passProps”中执行相同的回调。您还可以将args传递给此回调。希望它有所帮助。

Answer 2

在推送新路线时，是否可以在导航器道具上传递回调功能，并在弹出前一路线之前使用表格数据调用该功能？

Answer 3

对于NavigatorIOS，您还可以使用replacePreviousAndPop（）。

代码：

const auto &

您可以在此处找到工作示例：https://rnplay.org/apps/JPWaPQ

我希望有所帮助！

Answer 4

我在React Native的导航器中遇到了同样的问题，我使用EventEmitters和Subscribables解决了这个问题。这个例子非常有用：https://colinramsay.co.uk/2015/07/04/react-native-eventemitters.html

我需要做的就是更新ES6和最新版本的React Native。

应用程序的顶级：

import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import {MyNavigator} from './components/MyNavigator';
import EventEmitter from 'EventEmitter';
import Subscribable from 'Subscribable';

class MyApp extends Component {
    constructor(props) {
        super(props);
    }
    componentWillMount() {
        this.eventEmitter = new EventEmitter();
    }
  render() {
    return (<MyNavigator events={this.eventEmitter}/>);
  }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

在导航器的_renderScene函数中，确保包含“events”prop：

_renderScene(route, navigator) {
    var Component = route.component;
    return (
        <Component {...route.props} navigator={navigator} route={route} events={this.props.events} />
    );
}

这是FooScreen组件的代码，用于呈现listview。

（请注意，此处使用了react-mixin来订阅该事件。在大多数情况下，mixins should be eschewed支持更高阶的组件，但在这种情况下我无法找到解决方法）：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ListView,
  Text
} from 'react-native';
import {ListItemForFoo} from './ListItemForFoo';
import reactMixin from 'react-mixin'
import Subscribable from 'Subscribable';

export class FooScreen extends Component {
  constructor(props) {
    super(props);

    this._refreshData = this._refreshData.bind(this);
    this._renderRow = this._renderRow.bind(this);

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {
      dataSource: ds.cloneWithRows([])
    }
  }

  componentDidMount(){
    //This is the code that listens for a "FooSaved" event.
    this.addListenerOn(this.props.events, 'FooSaved', this._refreshData);
    this._refreshData();
  }

  _refreshData(){
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(//YOUR DATASOURCE GOES HERE)
    })
  }
  _renderRow(rowData){
      return <ListItemForFoo 
          foo={rowData} 
          navigator={this.props.navigator} />;
  }
  render(){
    return(
      <ListView
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}
      />
      )

  }
}
reactMixin(FooScreen.prototype, Subscribable.Mixin);

最后。我们需要在保存Foo之后实际发出该事件：

在你的NewFooForm.js组件中你应该有这样的方法：

  _onPressButton(){
    //Some code that saves your Foo

     this.props.events.emit('FooSaved'); //emit the event
     this.props.navigator.pop();  //Pop back to your ListView component
  }

Answer 5

您可以使用 AsyncStorage ，在子Component上保存一些值，然后调用 navigator.pop（）：

AsyncStorage.setItem('postsReload','true');
this.props.navigator.pop();

在父组件中，您可以从AsyncStorage中读取它：

async componentWillReceiveProps(nextProps) {
    const reload =  await AsyncStorage.getItem('postsReload');
    if (reload && reload=='true')
    {
       AsyncStorage.setItem('postsReload','false');
       //do something
    }
  }

在导航器弹出窗口中反映Native Pass属性

5 个答案: