javascript - 在 React Navigation 中重用屏幕

Question

我是 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 执行两次。这让我相信主屏幕实际上在导航堆栈上出现了两次。

Answer 1

在您的FRWScreen上，您应该使用this.props.navigation.goBack(null)。请参阅https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back .