小贝子编程

React Navigator StackNavigator:goBack 在从同一场景调用两次时不起作用



假设我想实现一个具有目录结构的文件资源管理器。我创建了一个 React Native 组件，它列出了特定文件夹的文件和目录。当我单击一个文件夹时，我希望进入新文件夹并列出其文件和文件夹。显然，我希望能够使用相同的 React 组件来渲染不同的文件夹。

我使用StackNavigator。这是我的代码

这是我的尝试，但不起作用：

import React, { Component } from 'react';
import {
  AppRegistry,
  BackHandler,
  ListView,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';
export default class FileExplorerScene extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    // Empty list before adding entries
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: ds.cloneWithRows(['a', 'b', 'c'])
    };
  }
  onPress(rowData) {
    console.log("onPress(" + rowData + ")");
    this.props.navigation.navigate('FileExplorer', { parent: rowData });
  }
  goBack() {
    this.props.navigation.goBack();
    return true;
  }
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.goBack.bind(this));
  }
  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableNativeFeedback onPress={ () => { this.onPress(rowData); }}>
        <Text style={{ margin:5, fontSize: 20}}>{ rowData }</Text>
      </TouchableNativeFeedback>
      );
  }
  render() {
    const { params } = this.props.navigation.state;
    var currentPath;
    if (params) {
      currentPath = (<Text style={{ margin:10, fontSize: 24}}>Current Path: {params.parent}</Text>);
    } else {
      currentPath = (<Text style={{ margin:10, fontSize: 24}}>Root path</Text>);
    }
    return (
      <View>
        { currentPath }
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          enableEmptySections={true}
        />
      </View>
    );
  }
}
const App = StackNavigator(
  {
    FileExplorer: { screen: FileExplorerScene },
  },{
    headerMode: 'none',
  }
);
AppRegistry.registerComponent('ReactProject', () => App);

  • 点击一个：我可以看到Current Path: a 

    I/ReactNativeJS( 1125): onPress(a)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'a' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 1,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 0,
I/ReactNativeJS( 1125):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' } ] } }

  • 点击b：我可以看到Current Path: b 

    I/ReactNativeJS( 1125): onPress(b)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'b' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 1,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

  • 点击c：我可以看到Current Path: c 

    I/ReactNativeJS( 1125): onPress(c)
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 1125):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 1125):      routeName: 'FileExplorer',
I/ReactNativeJS( 1125):      params: { parent: 'c' },
I/ReactNativeJS( 1125):      action: undefined },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 3,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'c' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-3',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

  • 回去。我可以看到Current Path: b 

    I/ReactNativeJS( 1125): goBack()
I/ReactNativeJS( 1125): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: 'id-1497310673011-3' },
I/ReactNativeJS( 1125):   newState: 
I/ReactNativeJS( 1125):    { index: 2,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 1125):   lastState: 
I/ReactNativeJS( 1125):    { index: 3,
I/ReactNativeJS( 1125):      routes: 
I/ReactNativeJS( 1125):       [ { routeName: 'FileExplorer', key: 'Init-id-1497310673011-0' },
I/ReactNativeJS( 1125):         { params: { parent: 'a' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-1',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'b' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-2',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' },
I/ReactNativeJS( 1125):         { params: { parent: 'c' },
I/ReactNativeJS( 1125):           key: 'id-1497310673011-3',
I/ReactNativeJS( 1125):           routeName: 'FileExplorer' } ] } }

  • 回去。无变化

    I/ReactNativeJS( 1125): goBack()

  • 回去。无变化

    I/ReactNativeJS( 1125): goBack()

我是否正确使用goBack？还是StackNavigator的问题？

实际上用

this.props.navigation.goBack(null)替换this.props.navigation.goBack()可以使其工作！
反应导航文档非常令人困惑...

现在，一切都按照我想要的方式工作：

  • 点击a：我可以看到Current Path: a 

    I/ReactNativeJS( 2045): onPress(a)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'a' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 0,
I/ReactNativeJS( 2045):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' } ] } }

  • 点击b：我可以看到Current Path: b 

    I/ReactNativeJS( 2045): onPress(b)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'b' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

  • 点击c：我可以看到Current Path: c 

    I/ReactNativeJS( 2045): onPress(c)
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: 
I/ReactNativeJS( 2045):    { type: 'Navigation/NAVIGATE',
I/ReactNativeJS( 2045):      routeName: 'FileExplorer',
I/ReactNativeJS( 2045):      params: { parent: 'c' },
I/ReactNativeJS( 2045):      action: undefined },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 3,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'c' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-3',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

  • 回去。我可以看到Current Path: b 

    I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 3,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'c' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-3',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

  • 回去。我可以看到Current Path: a 

    I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 2,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' },
I/ReactNativeJS( 2045):         { params: { parent: 'b' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-2',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

  • 回去。我可以看到Root path 

    I/ReactNativeJS( 2045): goBack()
I/ReactNativeJS( 2045): 'Navigation Dispatch: ', { action: { type: 'Navigation/BACK', key: null },
I/ReactNativeJS( 2045):   newState: 
I/ReactNativeJS( 2045):    { index: 0,
I/ReactNativeJS( 2045):      routes: [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' } ] },
I/ReactNativeJS( 2045):   lastState: 
I/ReactNativeJS( 2045):    { index: 1,
I/ReactNativeJS( 2045):      routes: 
I/ReactNativeJS( 2045):       [ { routeName: 'FileExplorer', key: 'Init-id-1497998297948-0' },
I/ReactNativeJS( 2045):         { params: { parent: 'a' },
I/ReactNativeJS( 2045):           key: 'id-1497998297948-1',
I/ReactNativeJS( 2045):           routeName: 'FileExplorer' } ] } }

  • 回去。没有预期的：-(

    I/ReactNativeJS( 2045): goBack()

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium