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

Question

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

我有一个包含 4 个项目的底部导航器，比如 Dashboard、X、Patient 和 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”。道具中也会有一些数据可用。但是在直接点击 'Patient' 菜单时，我需要移动到没有数据传递的“AddPatientScreen”。

我试过上面的代码。但只有最初的点击有效。如果我首先从列表中进行选择，则患者菜单始终显示“PatientDashboardScreen”，如果我首先直接选择患者菜单，则患者菜单选择始终显示“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

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

React native : bottom navigation with dynamic initialRouteName implementation

react-native

react-navigation-bottom-tab