Question

希望您做的很棒。我刚刚开始学习本机反应，一切似乎都很好。我对JSX很陌生，所以我希望有人可以在这个问题上为我提供正确的指导，而我却无法在Google上找到正确的答案。

我一直试图同时使用“ react-native”和“ react-navigation”中的“ createStackNavigator和createDrawerNavigator”，但是我无法使其同时工作。标题上的按钮和菜单消失。

这是我的代码：

import React from 'react';
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation'; // 1.0.0-beta.27

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./assets/spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class MyDrawerMenu extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    drawerLabel: 'Home',
    headerLeft:
    <View>
    <Button
      onPress={() => this.props.navigation.navigate('DrawerToggle')}
      title="Menu"
       />
    </View>,
    headerRight: (
    <View>
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    </View>
    ),
  };

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

class MyHomeScreen extends React.Component {

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

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

const MyDrawerNavigator = createDrawerNavigator({
  MyDrawerMenu: {
    screen: MyDrawerMenu,
  },
});

const RootStack = createStackNavigator(
  {
    MyHomeScreen: {
      screen: MyHomeScreen,
    },
    MyDrawerNavigator: {
      screen: MyDrawerNavigator,
    },
  },
  {
    initialRouteName: 'MyHomeScreen',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#000',
      },
      headerTintColor: '#333',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

const MyApp = createAppContainer(RootStack);

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

如果你们看到问题了，请指导我。非常感谢你，

此致

无法同时使用“ createStackNavigator和createDrawerNavigator”

0 个答案: