标签: react-navigation

我正在尝试创建一个带有自定义内容的 React Navigation 抽屉（我想放置个人资料信息，可能不是任何链接）。我这样做遇到了很多麻烦。

这是我的基本堆栈/抽屉：

const Drawer = createDrawerNavigator();

function DrawerNav() {
  return (
    <ScrollView>
      <DrawerItems {...props} />
      <Text>Test Content</Text>
    </ScrollView>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} options={{
          headerShown: false
        }} />
        <Stack.Screen name="Detail" component={Detail} />
        <Stack.Screen name="Chat" component={Chat} />
        <Stack.Screen name="Leagues" component={Leagues} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Home" component={Home} options={{
          headerRight: (navigation) => (
            <TouchableOpacity onPress={(navigation) => navigation.dispatch(DrawerActions.toggleDrawer())}>
              <EvilIcons name="navicon" size={50} color="black" />
            </TouchableOpacity>
          ),
          headerLeft: () => …

如果我在 React-Navigation V5 中将标头设置为关闭，是否可以拥有自定义标头？

我尝试过，但是headerLeftandheaderRight似乎什么也没做，例如，我有以下内容：

<Stack.Screen
  component={UploadStack}
  name="UploadStack"
  options={{ headerShown: false }}
/>

然后在我的UploadStack，我有

<Stack.Navigator initialRouteName="TrackUploadSelectionScreen">
      <Stack.Screen
        name="AddToPlaylistScreen"
        component={AddToPlaylistScreen}
      />
      <Stack.Screen
        name="TrackUploadSelectionScreen"
        component={TrackUploadSelectionScreen}
        options={{
          title: t('general.selectToUpload'),
          headerLeft: () =>
            Platform.select({
              ios: () => (
                <NavigationHeader.TextButton
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              ),
              android: () => (
                <NavigationHeader.IconButton
                  iconName="times"
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              )
            })
        }}
      />
</Stack.Navigator>

但它没有创造任何东西

我的目标是为 提供顶部和底部导航栏Home, Dashboard, and Album，但不为SignIn. 问题是，我希望将按钮放在底部而不是顶部。

最后剩下的难题是如何Sign In向底部导航栏添加按钮。

障碍是，如果您编写<Tab.Screen name="Sign In component={SignIn} />并按下带有参数的按钮onPress={() => navigation.navigate('SignIn')}，它会将您导航到Tab.Screen而不是Stack.Screen。

const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Dashboard" component={Dashboard} />
      <Tab.Screen name="Album" component={Album} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: ''}} name="MyTabs" component={MyTabs} />
      <Stack.Screen name="SignIn" component={SignIn} />
    </Stack.Navigator>
  );
}

export default function …

使用react-navigation库，当您位于堆栈导航器一部分的屏幕上时，您可以使用props.navigation.push(route name, params)。我想实现同样的目标，能够推送一个新屏幕，但是从我获取 NavigationContainer 引用的根级别开始。

所以我有这个代码

   <NavigationContainer ref={navigationRef}>
       ... 
   </NavigationContainer>

我想做一些类似的事情

   navigationRef.push(routeName, params);

不幸的是，我这里没有push方法。有解决方法吗？

我尝试使用海拔 0 属性隐藏标题阴影。

在 Android 10 上，它不起作用。标题是灰色的。在其他版本中，它可以工作。

我正在使用 React Navigation V5。

海拔 0 的 Android 10：

Android 10 无海拔 0：

Android 8.1，海拔 0：

我的代码：

<Stack.Navigator>
      <Stack.Screen
        name="DiscountsReleaseDetail"
        component={DiscountsReleaseDetail}
        options={({ navigation, route }) => {
          const { numSeq, codMaquina } = route.params.order;
          return {
            headerTitle: `Pedido ${numSeq}/${codMaquina}`,
            headerTitleAlign: 'center',
            headerBackTitleVisible: false,
            headerTintColor: '#fff',
            headerStyle: {
              backgroundColor: colorCompany,
              shadowOpacity: 0, // remove shadow on iOS
              elevation: 0, // remove shadow on Android
            },
            headerLeft: () => (
              <HeaderButtonBack
                onPress={() => {
                  navigation.reset({ …

我们有一个利用 Branch.io 通用链接的应用程序。遵循以下文档： https://help.branch.io/developers-hub/docs/react-native#read-deep-link

在react-native应用程序上，您设置了一个订阅者来接收javascript运行时中的深层通用链接。

使用这里的最新版本react-navigation：https ://reactnavigation.org/docs/deep-linking

React Navigation 希望原生处理深层链接。React Navigation 似乎没有提供手动启动链接的好方法。

我如何同时使用这两项服务？事实证明，获取深层链接并将其分解为可路由的深层链接具有挑战性。我们的应用程序具有嵌套路由器，并且重新进行从路径到屏幕和参数的转换是我不想做的事情。最近有人这样做过吗？谢谢。

我只是想找到一种方法来改变我的材料底部选项卡就像这样

有没有办法做这样的事情？

我无法使用 barStyle 对它应用边框半径

    <Tab.Navigator
    initialRouteName="Home"
    activeColor={Colors.primary}
    inactiveColor="black"
    barStyle={{ backgroundColor: 'white', borderRadius: 30}}
    >

活动选项卡上有一个默认的蓝色底部边框。但我无法改变这个边框颜色。有人可以告诉我如何更改此默认颜色吗？

const Tab = createMaterialTopTabNavigator();

const SpecificChannelNavigator = () => (
  <Tab.Navigator 
    tabBarOptions={{
      style: {
        // borderColor: colors['color-primary-500'],
        borderColor: "transparant"
      }
    }}
  >
    <Tab.Screen name={Routes.groupChat} component={GroupChat} />
    <Tab.Screen name={Routes.users} component={Users} />
    <Tab.Screen name={Routes.groupChatSettings} component={ChannelSettings} />
  </Tab.Navigator> 
);

export default SpecificChannelNavigator;

旧值在焦点事件侦听器内返回

如何在事件侦听器中获取当前状态/值，因为它当前返回旧值

  const [organizationName, setOrganizationName] = React.useState('');

      React.useEffect(() => {
        const unsubscribeNavigationFocus = props.navigation.addListener(
          'focus',
          async () => {
        try {     
          console.log(organizationName, 'OLD VALUE');
        
    
          // }
        } catch (error) {
          console.log('inside error');
          console.log(error);
    
        } finally {
    
        }
      }
        );
    
        return unsubscribeNavigationFocus;
      }, [props.navigation]);

@react-navigation/native：“5.8.10”，react”：“16.13.1”，react-native：“0.63.4”，

我想隐藏屏幕标题，但仍然在堆栈导航器中显示后退按钮？我在 Stack.Navigator 中设置了 screenOptions={{ headerShown: false }} ，它隐藏了屏幕标题和后退按钮。我想隐藏屏幕标题。

有人可以帮忙吗？下面是我的堆栈导航器：

function SearchStack() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="SearchScreen" component={SearchScreen} />
        <Stack.Screen name="SearchListScreen" component={SearchListScreen} />

     </Stack.Navigator>
   );
}

在选项卡导航器中，堆栈设置为：

   <Tab.Navigator screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {...})}> 
    <Tab.Screen name="Search" component={SearchStack} />
   </Tab.Navigator>  

这就是我目前看到的：

但这就是我希望我的选项卡导航栏仍然位于搜索堆栈底部的情况：

这是我在 Stack.Navigator 中使用 options={{headerMode:"none"}} 得到的结果：

将 Stack.Navigator 更新添加到 <Stack.Navigator screenOptions={{ headerTitle:"", headerTransparent:true }}> 时，会发生以下情况。如何将后退按钮添加或移动到顶部，就像第二张图片一样，这是在不将堆栈添加到 Tab.Screen 时实现的，因此进行更改：

<Tab.Screen name="Search" component={SearchStack} />

到

<Tab.Screen name="Search" component={SearchScreen} />

但这样做会导致该选项卡不会出现在搜索列表屏幕中。