我在我的 React Native 应用程序中使用 react-navigation。
我不断收到一个错误,该错误应该是仅限开发的警告,不会在生产中显示。
如何解决以下错误?
console.error: "The action 'NAVIGATE' with payload
{"name":"192.168.100.189:19000","params":{}} was not handled by any
navigator.
Do you have a screen named '192.168.100.189:19000'?
If you'r trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator.
This is a development-only warning and won't be shown in production."
最佳答案
这里可能发生两件事:
在我的情况下:我有不同的函数返回单独的堆栈导航器,如下面的代码所示,我想要 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');
};
注意:我使用的部分
this.props.navigation.replace('Home');
里面设置屏幕 .这可以正常工作,但 回家路线 被调用的是来自 function SettingsStack() {...}
函数而不是 function MainStack() {...}
功能。所以来自 的所有导航回家路线 在堆栈的顶部会给我这样一个错误,因为我的 Activity 堆栈只有两条路线,设置路由和 回家路线 .
后来我意识到我在强制我的应用程序寻找不同堆栈中的路由,所以我重新连接了
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 现在连接到 SettingsStack 的行。简介:确保您调用的路由与调用路由位于同一堆栈中,或者只需确保您以某种方式连接了路由,例如将 Stack 函数放入 Drawer Navigator 函数中。至少必须有关系或加入。
关于javascript - React Native Navigation Error : The action navigate with payload {"name": 192. 168.100.189:1900 0", "params":{}} 未被任何导航器处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61185135/