React Native中如何同时实现DrawerNavigator与StackNavigator？求助

我帮你排查了代码里的几个关键问题，这些小错误正是导致应用崩溃的原因，下面逐一说明并给出修正方案：

问题1：组件定义顺序错误 #

你在创建DrawerNavigator时引用了CustomDrawer，但CustomDrawer是在Drawer之后定义的——JS代码是从上到下执行的，这会导致创建导航器时找不到CustomDrawer组件，直接引发报错。必须先定义CustomDrawer，再创建DrawerNavigator。

问题2：JSX标签未正确闭合 #

在CustomDrawer的代码里，你写了<Content &gt;，这是明显的语法错误，正确的闭合标签应该是</Content>。

问题3：图片路径可能无效 #

你的图片引用路径是../image/logo.png，如果app.js在项目根目录，../会跳出根目录，根本找不到图片文件。改成./image/logo.png（前提是image文件夹在项目根目录下）。

修正后的完整代码 #

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, DrawerNavigator, DrawerItems } from "react-navigation";
import { Container, Header, Content, Thumbnail, Button, Body } from 'native-base';
import Profile from './components/Profile.js';
import Main from './components/Main.js';
import Login from './components/Login.js';
import Product from './components/Product.js';

// 先定义CustomDrawer，确保创建DrawerNavigator时能找到它
export const CustomDrawer = (props) => (
  <Container>
    <Header style={styles.headerStyle}>
      <Body style={styles.bodyStyle}>
        <Thumbnail style={{ height: 100, width: 100 }} source={require('./image/logo.png')} />
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content> {/* 修正闭合标签 */}
  </Container>
)

export const Drawer = DrawerNavigator({
  Main: { screen: Main },
  Profile: { screen: Profile },
}, {
  initialRouteName: 'Main',
  contentComponent: CustomDrawer,
  drawerPosition: 'Left',
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
});

export const Navapp = createStackNavigator({
  Login: { screen: Login },
  Drawer: { screen: Drawer },
  Product: { screen: Product },
});

export default class App extends Component {
  render() {
    return (
      <Navapp />
    );
  }
}

const styles = StyleSheet.create({
  // 补充你的样式示例，可根据需求修改
  headerStyle: {
    height: 150,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  bodyStyle: {
    alignItems: 'center'
  }
});

额外建议 #

• 清除RN缓存再运行：执行npm start -- --reset-cache或yarn start --reset-cache，缓存问题经常会引发莫名其妙的500错误。
• 确认依赖版本兼容：你用的是旧版React Navigation API（createStackNavigator这类），如果后续升级到v5+，API会有大幅变化，注意适配。
• 检查native-base安装状态：RN 0.60+版本支持自动链接，低版本需要手动执行链接操作。

按照上面的修改后，应该就能正常运行了，试试看！

内容的提问来源于stack exchange，提问作者Amir