Question

我在AppNavigator.js文件中定义了stackNavigator和DrawerNavigator。然后由App导入。在AppNavigator中，我有一个抽屉图标可打开侧边栏，但由于导航不存在，因此无法将其打开。我无法将导航传递给AppNavigator正弦App组件不是堆栈导航器的一部分。我试图将导航包含在一个文件中，但仍然能够从那里打开/关闭我的抽屉栏。有帮助吗？

AppNavigator.js：

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ScreenHome from './screens/member/ScreenHome';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from "react-native-vector-icons/Ionicons";

const authenicatedNavigation = createStackNavigator(
  {
    Home: {
      screen: ScreenHome,
      navigationOptions: ({ navigation }) => ({
        title: "Home",
        drawerLabel: "Home"
      })
    }
  },
  {
    initialRouteName: "Home",
    headerMode: "screen",
    defaultNavigationOptions: {
      headerStyle: {
          backgroundColor: '#ffffff',
          elevation: 0,
          shadowOpacity: 0
      },
      headerTintColor: '#333333',
      headerTitleStyle: {
          fontWeight: 'bold',
          color: '#ffffff'
      },
      headerLeft: (

        <Icon
        style={{paddingLeft: 10, color:'white'}}
        onPress={()=> navigation.openDrawer()} //-----undefined navigation
        name="md-menu"
        size={30}
        />
      )

  }
  }
)

const MainDrawer = createDrawerNavigator(
  {
    MainTabs: authenicatedNavigation,
  },
  {
    hideStatusBar : false,
    drawerBackgroundColor: 'rgba(255,255,255,0)',
    overlayColor : '#f68873',
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#6b52ae'
    }
  }



  );

const App = createSwitchNavigator({
  App: {
    screen: MainDrawer,
  }
});


const AppNavContainer = createAppContainer(
 App,
 {
  initialRouteName: 'App',
}
);

export default AppNavContainer;

App.js：

import React , {Component}  from 'react';
import { StyleSheet, View } from 'react-native';
import AppNavContainer from './AppNavigator';
import NavigationService from './shared/NavigationService';
import  {axios} from './shared/httpinterceptor';

export default class App extends Component {
  constructor(){
    super();
  }

  render() { 

  return (
    <View>
      <AppNavContainer
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
      />
    </View>
  );
  }
}

当前，在ScreenHome文件中，我可以通过以下方式打开抽屉：

  <Button onPress={this.props.navigation.openDrawer}  title="Open"/>

鉴于我无权访问Apps中的props.navigation，如何从AppNavigator中打开抽屉？

Answer 1

defaultNavigationOptions（以及navigationOptions）可以定义为将导航实例作为参数接收的函数，因此您只需要按以下方式更新defaultNavigationOptions：< / p>

defaultNavigationOptions: ({navigation}) => ({
  headerStyle: {
    backgroundColor: '#ffffff',
    elevation: 0,
    shadowOpacity: 0
  },
  headerTintColor: '#333333',
  headerTitleStyle: {
    fontWeight: 'bold',
    color: '#ffffff'
  },
  headerLeft: (
    <Icon
      style={{paddingLeft: 10, color:'white'}}
      onPress={()=> navigation.openDrawer()}
      name="md-menu"
      size={30}
    />
  )
})

组件不属于堆栈导航器时的props.navigation

1 个答案: