我是 React Native 新手,尝试使用 react-navigation 在两个屏幕(或页面)之间设置导航。包裹。我现在正在使用 StackNavigator
。
我面临的问题是似乎无法导航回上一个屏幕。我所能做的就是调用 navigate()
。例如,如果我想从 Home
导航到 FRW
然后返回 Home
,似乎这会给我留下两个 实例code>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 看起来与 HomeScreen.js 类似(并且包含 .navigate("Home")
)
此代码的结果是,在导航到 FRW 并返回后,地理位置回调使用不同的 watchID 执行两次。这让我相信主屏幕实际上在导航堆栈上出现了两次。
最佳答案
在您的FRWScreen
上,您应该使用this.props.navigation.goBack(null)
。请参阅https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back .
关于javascript - 在 React Navigation 中重用屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43920441/