这里可能发生两件事：
在我的情况下：我有不同的函数返回单独的堆栈导航器，如下面的代码所示，我希望SettingsScreen 在用户第一次使用该应用程序时出现，以便他们设置配置，下次他们再次打开应用程序时，他们会首先看到主屏幕（与身份验证相同的流程）：
function SettingsStack() {
return (
<Stack.Navigator initialRouteName='Settings'>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{
title: 'SMS Recipient Number',
headerShown: true,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen name="Home" component={HomeScreen} options={{ title: '', headerTransparent: true }}
/>
</Stack.Navigator>
);
}
function MainStack() {
return (
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen
name="Update"
component={UpdateScreen}
options={{
title: 'Update Recipient Phone',
headerTitleAlign: 'center',
headerShown: true
}}
/>
<Stack.Screen
name="Security"
component={PinScreen}
options={{
title: 'Provide PIN',
headerTitleAlign: 'center',
headerShown: true
}}
/>
<Stack.Screen
name="Home"
headerMode="screen"
component={HomeScreen}
options={({ navigation }) => ({
headerTitle: '',
headerTransparent: true,
headerRight: () => (
<Button
icon={
<Icon
name='settings'
type='feather'
color='grey'
onPress={() => navigation.navigate('Update')}
onLongPress={() => navigation.navigate('Update')}
/>
}
type="clear"
buttonStyle={{ marginRight: 10 }}
/>
),
})}
/>
</Stack.Navigator>
);
}
设置屏幕：在用户提供所需详细信息后的设置屏幕中，我使用以下功能重定向到HomeScreen：
transactEntry = async () => {
const { phone_number } = this.state;
if ((this.state.phone_number.trim() == "") || (this.state.phone_number.trim().length == 0)) {
Alert.alert('Error:', 'Please enter valid phone number.');
return
}
try {
await AsyncStorage.setItem('@recipient_number', phone_number);
} catch (error) {
Alert.alert('Error:', 'Error setting recipient phone number!');
}
Keyboard.dismiss();
let successToast = Toast.show('Recipient phone number set successfully.', {
duration: Toast.durations.LONG,
position: Toast.positions.TOP,
shadow: true,
animation: true,
backgroundColor: 'black',
hideOnPress: true,
delay: 0,
onShow: () => { },
onShown: () => { },
onHide: () => { },
onHidden: () => { }
});
setTimeout(function () {
Toast.hide(successToast);
}, 3000);
successToast;
this.props.navigation.replace('Home');
};
注意： 我在 SettingsScreen 中使用 this.props.navigation.replace('Home'); 的部分。这可以正常工作，但被调用的 Home route 来自 function SettingsStack() {...} 函数，而不是 function MainStack() {...} 函数。
因此，来自堆栈顶部的 Home Route 的所有导航都会给我这样的错误，因为 我的活动堆栈 只有两个路由，Settings路线和回家路线。
后来我意识到我是在强迫我的应用查找位于不同堆栈中的路由，因此我重新连接了 function MainStack() {...} 并将其与 function SettingsStack() {...} 函数链接，如下所示。
function SettingsStack() {
return (
<Stack.Navigator initialRouteName='Settings'>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{
title: 'SMS Recipient Number',
headerShown: true,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen name="MainStack" component={MainStack} options={{ title: '', headerTransparent: true }}
/>
</Stack.Navigator>
);
}
function MainStack() {
return (
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen
name="Update"
component={UpdateScreen}
options={{
title: 'Update Recipient Phone',
headerTitleAlign: 'center',
headerShown: true
}}
/>
<Stack.Screen
name="Security"
component={PinScreen}
options={{
title: 'Provide PIN',
headerTitleAlign: 'center',
headerShown: true
}}
/>
<Stack.Screen
name="Home"
headerMode="screen"
component={HomeScreen}
options={({ navigation }) => ({
headerTitle: '',
headerTransparent: true,
headerRight: () => (
<Button
icon={
<Icon
name='settings'
type='feather'
color='grey'
onPress={() => navigation.navigate('Update')}
onLongPress={() => navigation.navigate('Update')}
/>
}
type="clear"
buttonStyle={{ marginRight: 10 }}
/>
),
})}
/>
</Stack.Navigator>
);
}
记下 MainStack 现在连接到 SettingsStack 的 <Stack.Screen name="MainStack" component={MainStack} options={{ title: '', headerTransparent: true }}
/> 行。
简而言之：确保您调用的路由与调用路由位于同一堆栈中，或者只需确保您以某种方式连接了您的路由，例如将堆栈函数放入抽屉中导航器功能。至少必须有关系或加入。