标签: react-navigation-drawer

我收到错误:

不变违规:withNavigation只能用于导航器的视图层次结构.包装的组件无法从道具或上下文访问导航

我不知道为什么,因为我withNavigation在我的应用程序的其他组件中使用它,它的工作原理.我认为它所处理的组件与导致错误的组件没有区别.

码:

组件:

const mapStateToProps = (state: State): Object => ({
  alertModal: state.formControls.alertModal
})

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => {
  return bindActionCreators(
    {
      updateAlertModalHeight: updateAlertModalHeight,
      updateAlertModalIsOpen: updateAlertModalIsOpen,
      updateHasYesNo: updateAlertModalHasYesNo
    },
    dispatch
  )
}

class AlertModalView extends Component<AlertModalProps, State> {
  render(): Node {
    return (
      <View style={alertModalStyle.container}>
        <PresentationalModal
          style={presentationalModalStyle}
          isOpen={this.props.alertModal.isOpen}
          title={this.props.alertModal.title}
          navigation={this.props.navigation}
          updateHasYesNo={this.props.updateHasYesNo}
          message={this.props.alertModal.message}
          updateAlertModalHeight={this.props.updateAlertModalHeight}
          viewHeight={this.props.alertModal.viewHeight}
          hasYesNo={this.props.alertModal.hasYesNo}
          yesClicked={this.props.alertModal.yesClicked}
          updateAlertModalIsOpen={this.props.updateAlertModalIsOpen}
        />
      </View>
    )
  }
}

// $FlowFixMe
const AlertModalViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(AlertModalView)

export default …

我使用 react 导航版本创建了一个自定义抽屉导航器：5.X，但是当前活动选项卡没有在自定义抽屉菜单中突出显示。

1. 我在 DrawerItem 元素中添加了“activeTintColor”，但它没有应用于活动项目。
2. 我还在 drawerContentOptions 中添加了 activeTintColor。但也没有得到应用。他们有什么方法可以在自定义抽屉组件中使用这个常用选项吗？
3. 我在 DrawerItem 元素中使用了“图标”，根据反应导航文档，我在其中添加了默认道具（颜色、焦点、大小）。因此，图标的颜色为“灰色”（可能是默认行为）。如何更改此默认道具值？
4. “图标”中的默认道具“聚焦”也不起作用。所选选项卡的图标未更改。

请找到下面的代码图像。如果我犯了任何错误，请告诉我。

导航代码：

自定义抽屉组件：

当前活动标签：主页

我正在编写一个类似于 Instagram 的 React Native 应用程序。我已经有一个包含 5 个项目的底部选项卡导航器，最后一个是配置文件选项卡。

在这个配置文件选项卡中，我想要一个抽屉导航器来管理配置文件设置，我希望这个抽屉只能在此选项卡中“可绘制”，而不是其他选项卡。但我也希望抽屉同时显示在选项卡导航器的顶部（就像 Instagram 的一样）。

我正在为此使用反应导航库。我的问题是：这可能吗？如果是，我该如何在我的代码上实现它？

谢谢

我正在使用它，并且顶部有空白。任何人都可以向我提供详细信息以从顶部删除此空白。@react-navigation/抽屉

在我的本机应用程序中，我使用 Drawer Navigator 创建了一个侧边菜单，当我通过滑动打开它时，它运行良好。但我想做的是点击按钮打开它。目前正在尝试做槽式导航道具，相关代码如下：

import { withNavigation } from 'react-navigation';

class HallsList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isSideMenuOpen: false
    };
  } 

  renderTopView = () => {
      return(
        <View>
          <View style = {Styles.sideMenuButton}>
            <Button
              onPress = {()=> {
                if (this.state.isSideMenuOpen) {
                  {this.props.navigation.navigate('DrawerOpen')}
                }
                else {
                  {this.props.navigation.navigate('DrawerClose')}
                }
                this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})
              }
            }
            title = {'Side Menu'}
            />
          </View> ..... 


export default withNavigation(HallsList);

但是当我点击侧面菜单按钮时，它会被点击但之后没有任何反应。

开始：

<NavigationContainer>
      <Stack.Navigator>
        {
          isLoading ? <Stack.Screen name="AuthLoadingScreen" component={AuthLoadingScreen} />
          : (
          user ? (
            <Stack.Screen  name="AuthenticatedStack" component={AuthenticatedStack} options={{headerShown: false}} />
            ) : (
              <Stack.Screen  name="NotAuthenticatedStack" component={NotAuthenticatedStack} options={{headerShown: false}} />
            )
          )
        }
      </Stack.Navigator>
    </NavigationContainer>

认证堆栈：

const AuthenticatedStack = () => {
  return (
    <Drawer.Navigator initialRouteName="MainStack" drawerContent={props => <SideBar {...props} />}>
        <Stack.Screen name="MainStack" component={MainStack} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
      </Drawer.Navigator>
  );
};

主堆栈包含带有选项卡导航器和其他导航器的主屏幕，我计划从侧面菜单按钮导航到这些导航器：

const MainStack = () => {
  return (
    <Stack.Navigator>
          <Stack.Screen name="main" component={MainTabNavigator} options={({route}) => …

PS：大多数 Youtube 视频或网络上的文章都没有使用 ReactNavigation v5，它们使用的是旧版本。当用户可以单击按钮导航到不同的屏幕（使用 StackNavigator）和 DrawerNavigator 以及在屏幕之间导航时，有人可以显示一个虚拟项目。屏幕必须有一个类和一个简单的文本，就是这样。谢谢！

我将抽屉设置在右侧，但屏幕标题中的汉堡包图标保持默认左侧，是否有任何属性可以通过将位置更改为右侧？我知道应该通过配置自定义标头来完成，但我不想过度设计我的小项目。

我刚刚从 React Native 5.x 迁移到 6.x，现在我的导航堆栈出现了问题。当我在抽屉导航器深处导航几个屏幕，然后按 Android 上的后退按钮（没有尝试过 IOS）时，它会直接带我回到第一个屏幕。我的导航堆栈如下

 <NavigationContainer theme={MyTheme}>
        <Drawer.Navigator
          initialRouteName="NewsFeed"
          drawerContent={(props) => <SideNav {...props} />}
          screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        >
          <Drawer.Screen name="NewsFeed" component={NewsFeedScreen} />
          <Drawer.Screen name="Post" component={PostScreen} />
          <Drawer.Screen name="Users" component={UsersScreen} />
          <Drawer.Screen name="User" component={UserScreen} />
    ...
        </Drawer.Navigator>
      </NavigationContainer> 

我不确定问题是什么，也没有在任何地方找到任何答案。有人说将每个屏幕包裹在堆栈导航器中，其他人则说这是一个坏主意。

我是 React Native 的初学者，所以如果这是一个菜鸟问题，我深表歉意。我正在尝试使用这篇 React 导航文章和这篇关于 React 登录示例来学习。第一篇文章将所有代码放在其中，App.js而第二篇文章则将代码放在单独的页面中，但稍微过时了。所以我的计划是集成这两个示例，使用第一篇文章的代码，但在不同的页面中，而不是将所有内容都放在App.js.

我的项目结构

我得到的错误：

None of these files exist:
  * Screen\drawerScreens\settingsScreen(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * Screen\drawerScreens\settingsScreen\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   6 |
   7 | import HomeScreen from './Screen/drawerScreens/HomeScreen';
>  8 | import SettingsScreen from './Screen/drawerScreens/settingsScreen';
     |                             ^

一些帮助和提示将不胜感激。如果需要更多信息，请告诉我。提前致谢。