React native React native中的抽屉报警器不工作

我正在尝试在react native中实现drawernavigator…但我没有做到这一点，我使用此链接来实现 但是我不喜欢这个链接 我使用的代码是

    class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Home',
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});


AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

此代码不工作，因此显示此错误。

---

这是错误屏幕截图

将index.android.js文件代码替换为以下代码。我在下面展示了一个工作示例

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button,
  Image
} from 'react-native';
import { DrawerNavigator } from "react-navigation";

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Home',
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});


AppRegistry.registerComponent('SimpleApp', () => MyApp);

从“React”导入React；
进口{
评估学，
样式表，
按钮
形象
}从“反应本机”；
从“react navigation”导入{DrawerNavigator}；
类MyHomeScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“家”，
图标：（{tintColor}）=>(
),
}),
}
render（）{
返回(
this.props.navigation.navigate（'Notifications'）}
title=“转到通知”
/>
);
}
}
类MyNotificationsScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“通知”，
图标：（{tintColor}）=>(
),
}),
}
render（）{
返回(
this.props.navigation.goBack（）}
title=“回家”
/>
);
}
}
const styles=StyleSheet.create({
图标：{
宽度：24，
身高：24，
},
});
const MyApp=抽屉驱动程序({
主页：{
屏幕：我的主屏幕，
},
通知：{
屏幕：MyNotificationsScreen，
},
});
AppRegistry.registerComponent（'SimpleApp'，（）=>MyApp）；

将index.android.js文件代码替换为以下代码。我在下面展示了一个工作示例

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button,
  Image
} from 'react-native';
import { DrawerNavigator } from "react-navigation";

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Home',
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});


AppRegistry.registerComponent('SimpleApp', () => MyApp);

从“React”导入React；
进口{
评估学，
样式表，
按钮
形象
}从“反应本机”；
从“react navigation”导入{DrawerNavigator}；
类MyHomeScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“家”，
图标：（{tintColor}）=>(
),
}),
}
render（）{
返回(
this.props.navigation.navigate（'Notifications'）}
title=“转到通知”
/>
);
}
}
类MyNotificationsScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“通知”，
图标：（{tintColor}）=>(
),
}),
}
render（）{
返回(
this.props.navigation.goBack（）}
title=“回家”
/>
);
}
}
const styles=StyleSheet.create({
图标：{
宽度：24，
身高：24，
},
});
const MyApp=抽屉驱动程序({
主页：{
屏幕：我的主屏幕，
},
通知：{
屏幕：MyNotificationsScreen，
},
});
AppRegistry.registerComponent（'SimpleApp'，（）=>MyApp）；

我认为没有任何方法可以在不使用api的情况下应用抽屉导航器我尝试了这个，但不完整，所以我使用api，…您也使用抽屉导航器api进行此操作

我认为没有任何方法可以在不使用api的情况下应用抽屉导航器我尝试了这个，但不完整，所以我使用api，…您还可以为此使用抽屉导航器api

从“React”导入React；
进口{
按钮
}从“反应本机”；
从“react navigation”导入{DrawerNavigator}；
类MyHomeScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“家”
}),
}
render（）{
返回(
this.props.navigation.navigate（'drawerropen'）}
title=“打开抽屉”
/>
);
}
}
类MyNotificationsScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“通知”
}),
}
render（）{
返回(
this.props.navigation.goBack（）}
title=“回家”
/>
);
}
}
const MyApp=抽屉驱动程序({
主页：{
屏幕：我的主屏幕，
},
通知：{
屏幕：MyNotificationsScreen，
},
});
导出默认MyApp；

从“React”导入React；
进口{
按钮
}从“反应本机”；
从“react navigation”导入{DrawerNavigator}；
类MyHomeScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“家”
}),
}
render（）{
返回(
this.props.navigation.navigate（'drawerropen'）}
title=“打开抽屉”
/>
);
}
}
类MyNotificationsScreen扩展了React.Component{
静态导航选项={
出票人：（）=>({
标签：“通知”
}),
}
render（）{
返回(
this.props.navigation.goBack（）}
title=“回家”
/>
);
}
}
const MyApp=抽屉驱动程序({
主页：{
屏幕：我的主屏幕，
},
通知：{
屏幕：MyNotificationsScreen，
},
});
导出默认MyApp；

什么不起作用？先生，我想要一个同时运行ios和android的抽屉驱动程序。为此，我有很多链接，但没有人工作。这个链接也使用但不起作用。先生，如果你有任何同时运行android和ios的抽屉驱动程序代码，请给我发送plz……什么不起作用？先生，我想要一个同时运行ios和android的抽屉驱动程序。我遵循很多此链接但无人工作此链接也使用但不工作先生，如果您有任何运行android和ios的DrumerNavigator代码，请发送plz给我…一旦您运行react native run android命令，您必须在项目文件夹中运行react native start命令并重新加载应用程序。先生，我多次这样做，但出现与我前面提到的相同的错误。请在项目rm-rf node_modules&&npm installsir中尝试这两个命令。如果您有其他drawernavigator代码，请将此代码发送给我。这与代码无关。这都是关于您的配置。运行此命令，然后再次从启动adb反向tcp:8081 tcp:8081开始运行react本机运行android命令，您必须在项目文件夹中运行react native start命令并重新加载应用程序。先生，我这样做过很多次，但出现了如上所述的相同错误请在您的项目中尝试这两个命令rm-rf node_modules&&npm installsir如果您有其他drawernavigator代码，请将此代码发送给我

import React from 'react';
import {
  Button,
} from 'react-native';
import { DrawerNavigator } from "react-navigation";

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Home'
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('DrawerOpen')}
        title="Open drawer"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications'
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});


export default MyApp;