React native：带有动态 initialRouteName 实现的底部导航

Question

我是 React Native 的初学者。我经历了不同的相关主题。但失败了。这是我的问题，

我有一个底部导航器，有 4 个项目，比如仪表板、X、患者和 Y。这是优化的底部导航器代码。

   const Stack = createStackNavigator();
   const Bottom = createBottomTabNavigator();
    const Main = () => {
    return (
      <Bottom.Navigator
        initialRouteName="DashboardScreenStack"
        tabBarOptions={{
          style: {
            height: 70,
            paddingTop: 20,
            backgroundColor: '#F3F6FF',
          },
          activeTintColor: colors.navigationTextActive,
          inactiveTintColor: colors.navigationTextInactive,
          labelStyle: {
            fontSize: 15,
            marginTop: 15,
            paddingBottom: 10,
          },
        }}>
        <Bottom.Screen
          name="DashboardScreenStack"
          component={DashboardScreenStack}
          options={{
            tabBarLabel: 'Dashboard',
          }}
        />
        <Bottom.Screen
          name="X"
          component={X}
          options={{
            tabBarLabel: 'X',
          }}
        />
        <Bottom.Screen
          name="Patient"
          component={Patient}
          options={{
            tabBarLabel: 'Patient',
          }}
        />
        <Bottom.Screen
          name="Y"
          component={Y}
          options={{
            tabBarLabel: 'Y',
          }}
        />
      </Bottom.Navigator>
    );
  };

这是我的患者菜单代码。

const Patient = (props) => {
  let resultData = null;
  var initialRoute = '';
  if (
    typeof props.route.params != 'undefined' &&
    props.route.params.result != null
  ) {
    
    resultData = props.route.params.result;
    initialRoute = 'PatientDashboardScreen';
  } else {
    initialRoute = 'AddPatientScreen';
  }
  
  return (
    <Stack.Navigator
      initialRouteName={initialRoute }>
      <Stack.Screen
        name="PatientDashboardScreen"
        component={PatientDashboardScreen}
        initialParams={resultData}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="TestScreen1"
        component={TestScreen1}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="TestScreen2"
        component={TestScreen2}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="AddPatientScreen"
        component={AddPatientScreen}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

患者菜单中应显示 4 个屏幕。其中，如果我在仪表板菜单中选择一个项目，我需要打开“PatientDashboardScreen”。 props 中也会有一些可用的数据。但是在直接点击“Patient”菜单时，我需要移动到没有数据传递的“AddPatientScreen”。

我尝试了上面的代码。但只有初始点击有效。如果我首先从列表中选择，则始终显示“PatientDashboardScreen”，如果我先直接选择 Patient 菜单，则始终在 Patient 菜单选择中显示“AddPatientScreen”。

任何帮助都会非常有用。谢谢

Answer 1

根据您的问题 你有一个底部导航器，其中一个屏幕有一个嵌套的堆栈导航器。

这里的要求是在按下底部导航器按钮时显示特定屏幕，并在底部导航器中从另一个屏幕打开时重定向到一个屏幕以及一些参数。

这是一种方法。

  <Tab.Screen
    name="Hospital"
    component={HospitalView}
    options={({ navigation }) => ({
      tabBarButton: (props) => (
        <TouchableOpacity
          {...props}
          onPress={() =>
            navigation.navigate('Hospital', { screen: 'Patient' })
          }
        />
      ),
    })}
  />

您可以在底部导航器按钮中使用自定义 onPress，该按钮将使用带有屏幕选项的导航，将您带到特定屏幕。

要使用参数从另一个屏幕导航，您可以使用以下选项

   <Button
        title="Doctor"
        onPress={() =>
          navigation.navigate('Hospital', {
            screen: 'Doctor',
            params: { name: 'Doc 1' },
          })
        }
      />

您的完整代码应该与此类似

const Stack = createStackNavigator();
function Patient() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Patient Screen</Text>
    </View>
  );
}

function Doctor({route}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Doctor Screen</Text>
      <Text>{route?.params?.name}</Text>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      <Button
        title="Doctor"
        onPress={() =>
          navigation.navigate('Hospital', {
            screen: 'Doctor',
            params: { name: 'Doc 1' },
          })
        }
      />
    </View>
  );
}

function HospitalView() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Doctor" component={Doctor} />
      <Stack.Screen name="Patient" component={Patient} />
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen
        name="Hospital"
        component={HospitalView}
        options={({ navigation }) => ({
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() =>
                navigation.navigate('Hospital', { screen: 'Patient' })
              }
            />
          ),
        })}
      />
    </Tab.Navigator>
  );
}

您可以参考此示例 https://snack.expo.io/@guruparan/5f3f1d