gpt4 book ai didi

react-native - react 导航器 StackNavigator : goBack does not work when called twice from the same scene

转载 作者:行者123 更新时间:2023-12-04 19:30:03 29 4
gpt4 key购买 nike

假设我想实现一个具有目录结构的文件浏览器。我创建了一个 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()来自 this.props.navigation.goBack(null)让它工作!
    React Navigation documentation很困惑……

    现在,一切都如我所愿:

  • 点击 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()
  • 关于react-native - react 导航器 StackNavigator : goBack does not work when called twice from the same scene,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44510356/

    29 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com