React Native Navigation Error：操作未通过有效载荷{“ name”：192.168.100.189:19000“，” params“：{}}进行导航的任何导航器

Question

我在我的React Native应用程序中使用react-navigation。

我不断收到错误，该错误被认为是仅供开发使用的警告，并且不会在生产中显示。

如何解决以下错误？

console.error：“带有有效载荷的操作'NAVIGATE'{“ name”：“ 192.168.100.189:19000”，“ params”：{}}未被任何人处理导航器。

您是否有一个名为'192.168.100.189:19000'的屏幕？

[如果您尝试导航到嵌套导航器中的屏幕，请参见https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator。

这是仅供开发使用的警告，不会在生产中显示。“

Answer 1

反应导航允许该应用更改显示给用户的组件。您在代码中的某个地方调用navigation.navigate('192.168.100.189:19000')吗？那不是React Navigation的目的。导航的参数应该是屏幕名称：具体地说，就是您提供给Navigator.Screen组件的名称：

<Stack.Screen name="Your Camera" component={Camera} />

[navigation.navigate('Your Camera')会将应用导航到相机组件。

如果您希望用户在其浏览器中打开URL，则应使用Linking library，Linking.openURL('192.168.100.189:19000')。

PS：params对象是可选的。如果您要传递一个空对象，则不必在那里。

Answer 2

这里可能发生两件事：

在我的情况下：我有不同的函数返回单独的堆栈导航器，如下面的代码所示，我希望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>
  );
}

[Settings Screen：在用户提供了所需的详细信息之后，在设置屏幕内，我使用以下功能重定向到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');

};

NOTE：我在SettingsScreen中使用this.props.navigation.replace('Home');的部分。但是，要调用的Home route是从该function SettingsStack() {...}函数而不是function MainStack() {...}函数，将可以很好地工作。

因此，堆栈顶部Home Route中的所有导航都会给我这样的错误，因为我的活动堆栈只有两条路由，Settings Route和Home Route 。

[我后来意识到，我迫使我的应用程序查找位于不同堆栈中的Route，因此我重新连接了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 }}
      />

行。

简要说明：确保已调用的路由与调用路由位于同一堆栈中，或者只是确保已以某种方式连接了路由，例如将Stack函数放在Drawer Navigators函数中。至少必须有关系或加入。