我是React Native的新手，并尝试使用react-navigation包在两个屏幕（或页面）之间设置导航 . 我现在正在使用 StackNavigator .
我面临的问题是似乎无法导航回到之前的屏幕 . 我所能做的只是致电 navigate() . 例如，如果我想从 Home 导航到 FRW 并返回 Home ，那么这似乎会让我在堆栈上有两个 Home 并行执行的实例（其中一个无法看到） . 我的代码是这样的：
app.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './views/HomeScreen.js'
import FRWScreen from './views/FRWScreen.js'
const MainNavigator = StackNavigator({
FRW: { screen: FRWScreen },
Home: { screen: HomeScreen },
}, {
headerMode: 'screen',
headerVisible: false,
navigationOptions: {
header: null
},
initialRouteName: "Home"
});
export default class TestApp extends Component {
render() {
return (
<MainNavigator></MainNavigator>
);
}
}
AppRegistry.registerComponent('TestApp', () => TestApp);
HomeScreen.js
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Welcome'
};
(...)
onSomeButtonPressed() {
this.props.navigation.navigate('FRW');
}
componentDidMount() {
if (this.locationWatchID !== undefined) return;
this.locationWatchID = navigator.geolocation.watchPosition((position) => {
console.log(this.locationWatchID);
});
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.locationWatchID);
}
render() {
(...)
return (
<View style={styles.container}>
<MapView ref={ref => { this.map = ref; }} />
<TouchableHighlight
style={styles.someButton}
onPress={this.onSomeButtonPressed.bind(this)}
>
<Text>Press Me</Text>
</TouchableHighlight>
</View>
)
}
}
FRWScreen.js looks similar to HomeScreen.js (and contains .navigate("Home"))
在导航到FRW并返回之后，此代码的结果是使用不同的watchID执行两次地理定位回调 . 这让我相信HomeScreen实际上在导航堆栈上两次 .
1 回答
在
FRWScreen上，您应该使用this.props.navigation.goBack(null)代替 . 见https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back .