React Native - StackActions.reset 不执行任何操作

Question

我有这个函数，当按下<TouchableWithoutFeedback>区域时执行：

navigateToRentable = () => {
console.log('in navigateToRentable');
this.props
.navigation
.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: 'Rent',
actions: [
NavigationActions.navigate({
routeName: 'Rentable',
}),
]
}),
],
}))
}

我在控制台中看到in navigateToRentable，因此我知道该方法正在触发，但没有任何其他反应 - 控制台中没有其他输出。

这是我的导航结构：

相机导航器.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import RentScreenNavigator from './RentScreenNavigator';
import RentScreen from '../pages/RentScreen';
import CameraScreen from '../pages/CameraScreen';
import RentableScreen from '../pages/RentableScreen';
export default CameraNavigator = createStackNavigator(
{
OpenCamera: {
screen: CameraScreen,
navigationOptions: ({ navigation }) => ({
header: null
}),
},
RentDetails: {
screen: RentScreen,
navigationOptions: ({ navigation }) => ({
header: null
}),
},
Rentable: {
screen: RentableScreen,
navigationOptions: ({ navigation }) => ({
header: null
}),
}
},
{
initialRouteName: 'Rent',
},
);

相机屏幕导航器.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import CameraNavigator from './CameraNavigator';
export default class CameraScreenNavigator extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<CameraNavigator/>
)
}
};

应用.js

import React from 'react';
import { StyleSheet, Platform, Image, Text, View, ScrollView } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Icon } from 'react-native-elements';
import { createBottomTabNavigator } from 'react-navigation';
import firebase from 'react-native-firebase';
import { YellowBox } from 'react-native';
import HomeScreen from './pages/HomeScreen';
import ProfileScreen from './pages/ProfileScreen';
//import CameraScreen from './pages/CameraScreen';
import CameraScreenNavigator from './components/CameraScreenNavigator';
//import RentScreenNavigator from './components/RentScreenNavigator';
YellowBox.ignoreWarnings(['Class RCTCxxModule']);
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
YellowBox.ignoreWarnings(['You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.']);
const AppNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Profile: ProfileScreen,
Rent: CameraScreenNavigator,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = 'home';
} else if (routeName === 'Profile') {
iconName = 'user';
} else if (routeName === 'Rent') {
iconName = 'plus-square';
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return (
<Icon
name={iconName}
color={tintColor}
type='feather'
/>
)
}
}),
tabBarOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#c9fffd',
activeBackgroundColor: '#6de3dc',
inactiveBackgroundColor: '#6de3dc'
},
},
);
export default class App extends React.Component {
render() {
return (
<AppNavigator/>
)
}
}

正如您可能从StackActions.reset中可以看出的那样，我正在尝试导航到Rentable路线，该路线是CameraNavigator的一部分，这是一个子导航器，是主要的App导航器。我正在尝试从Home路由执行StackActions.reset，这是根App导航器的一部分。

总之，当我按下应该将我navigate到Rentable路线的区域时，没有任何反应。

更新

我试过：

this.props
.navigation
.dispatch(
NavigationActions.navigate({
routeName: 'Rent',
actions: [
NavigationActions.navigate({
routeName: 'Rentable',
}),
]
}),
)

第一个Navigation.navigate有效，但sub-action导航到Rentable不起作用。

更新

我仍在寻找为什么 StackActions.reset 不起作用的答案 - 但对于我试图做的事情(从父导航器导航到子导航器的页面(......我在这里找到了@kashishgrover提出的解决方法/方法：https://github.com/react-navigation/react-navigation/issues/2398

但是，这不是一个完美的解决方法 - 它强制应用程序转到中间页面，然后侦听参数，因此在一瞬间 - 中间页面加载，然后加载预期的页面。

Answer 1

this.props.navigation.dispatch(StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'OpenCamera' })],
}));

我需要index、key和routeName的正确组合actions。我也不需要一直导航到Home页面，只需要导航到与主App导航器相交的Rent页面。

Answer 2

要在堆栈之间导航，我使用：

const navigateToScreen = routeName => {
navigation.dispatch(StackActions.reset(StackActions.popToTop()))   
navigation.dispatch(NavigationActions.navigate({ routeName })) 
}