Здесь могут произойти две вещи:
В МОЕМ СЛУЧАЕ: У меня были разные функции, возвращавшие отдельные стековые навигаторы, как в коде ниже, я хотел, чтобы SettingsScreen отображал В самый первый раз пользователь использует приложение, чтобы задать настройки, и в следующий раз, когда он снова откроет приложение, он сначала увидит HomeScreen (тот же поток с аутентификацией) :
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');
};
ПРИМЕЧАНИЕ: часть, где я использовал this.props.navigation.replace('Home'); внутри SettingsScreen . Это бы хорошо работало, НО Home route , который вызывался, был из этой функции function SettingsStack() {...}, а не из функции function MainStack() {...}.
Таким образом, все переходы с Домашнего маршрута на вершине стека могут вызвать такую ошибку, поскольку мой активный стек имеет только два маршрута, Настройки маршрута и Домашний маршрут .
Позже я понял, что заставлял мое приложение искать маршруты, находящиеся в другом стеке, поэтому я переписал 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>
);
}
Обратите внимание на строку <Stack.Screen name="MainStack" component={MainStack} options={{ title: '', headerTransparent: true }}
/>, где MainStack был теперь подключен к стеку настроек.
IN BRIEF: Убедитесь, что маршрут, который вы вызвали находится в том же стеке, что и вызывающий маршрут, ИЛИ просто убедитесь, что вы как-то соединили свои маршруты, например, поместив функцию Stack в функцию Drawer Navigators. По крайней мере, должны быть отношения или присоединение.