我在react本机应用程序上使用NavigatorIOS。我想在导航回上一条路线时传递一些属性。
一个示例案例：我在表格页上。提交数据后，我想回到以前的路线，并根据提交的数据做一些事情
我该怎么做？
在推送新路由时，能否在导航器道具上传递一个回调函数，并在弹出到上一个路由之前用表单数据调用它？
显示如何在弹出之前使用回调的代码示例。这是专门针对Navigator而不是NavigatorIOS的，但类似的代码也可以应用于此。
你有第1页和第2页。您正在从第1页推到第2页，然后又跳回第1页。您需要从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();
},
函数"callbackFunction"将在"pop"之前调用。对于NavigatorIOS，您应该在"passProps"中执行相同的回调。您还可以将参数传递给此回调。希望能有所帮助。
您可以使用AsyncStorage，在子组件上保存一些值，然后调用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
}
}
对于NavigatorIOS，您也可以使用replacePreviousAndPop（）。
代码：
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
TouchableOpacity,
View,
AppRegistry,
NavigatorIOS
} = React;
var MainApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.mainContainer}
initialRoute={{
component: FirstScreen,
title: 'First Screen',
passProps: { text: ' ...' },
}}
/>
);
},
});
var FirstScreen = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.helloText}>
Hello {this.props.text}
</Text>
<TouchableOpacity
style={styles.changeButton} onPress={this.gotoSecondScreen}>
<Text>Click to change</Text>
</TouchableOpacity>
</View>
);
},
gotoSecondScreen: function() {
console.log("button pressed");
this.props.navigator.push({
title: "Second Screen",
component: SecondScreen
});
},
});
var SecondScreen = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.helloText}>
Select a greeting
</Text>
<TouchableOpacity
style={styles.changeButton} onPress={() => this.sayHello("World!")}>
<Text>...World!</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.changeButton} onPress={() => this.sayHello("my Friend!")}>
<Text>...my Friend!</Text>
</TouchableOpacity>
</View>
);
},
sayHello: function(greeting) {
console.log("world button pressed");
this.props.navigator.replacePreviousAndPop({
title: "First Screen",
component: FirstScreen,
passProps: {text: greeting}
});
}
});
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: "#eee"
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
marginTop: 50,
},
helloText: {
fontSize: 16,
},
changeButton: {
padding: 5,
borderWidth: 1,
borderColor: "blue",
borderRadius: 4,
marginTop: 20
}
});
AppRegistry.registerComponent("TestApp", () => MainApp);
您可以在此处找到工作示例：https://rnplay.org/apps/JPWaPQ
我希望这能有所帮助！
我在React Native的导航器上遇到了同样的问题，我使用EventEmitters和Subscribebles解决了这个问题。这里的这个例子非常有用：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功能中，确保包含"事件"道具：
_renderScene(route, navigator) {
var Component = route.component;
return (
<Component {...route.props} navigator={navigator} route={route} events={this.props.events} />
);
}
这是FooScreen组件的代码，它呈现了一个列表视图。
（请注意，这里使用react mixin是为了订阅事件。在大多数情况下，应该避免使用mixin，而使用更高阶的组件，但在这种情况下，我找不到绕过它的方法）：
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
}
这是一个老问题，但目前React Navigation关于将参数传递到上一个屏幕的文档建议我们使用Navigation.anavigation（）并传递我们希望上一个页面具有的任何参数。