2
假設我想實現具有目錄結構的文件資源管理器。我創建了一個列出特定文件夾的文件和目錄的React Native組件。當我點擊一個文件夾時，我希望進入新文件夾並列出它的文件和文件夾。很顯然，我希望能夠使用相同的React組件來呈現不同的文件夾。我使用StackNavigator。這裏是我的代碼React導航器StackNavigator：當從同一場景調用兩次時，goBack不起作用
這是我嘗試不工作：
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: aI/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: bI/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: cI/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: bI/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的問題？