如何在 react native 中构建嵌套导航

Question

我有创建材料顶部选项卡导航器和创建抽屉导航器的导航系统，我尝试在创建材料顶部选项卡导航器的左上角获取菜单栏图标，但直到此刻我都无法弄清楚如何在特定位置添加此元素，是否有任何可能对应于这种情况的反应本机属性，请您帮忙吗

import React, { Component } from "react";
import {.. } from "react-native";
import Icon from 'react-native-vector-icons/MaterialIcons'
import { createSwitchNavigator, createDrawerNavigator ,DrawerItems,createMaterialTopTabNavigator,createStackNavigator} from 'react-navigation'
import screens ...
console.disableYellowBox = true;


const TabBarNavig = createMaterialTopTabNavigator({
   Places  : {
   screen :Players,
   navigationOptions: ({ navigation }) => ({
    title: 'Placements'
  }
  )
   },
   GetPlaces : Teams,
   New : Matchs
},
{
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      fontSize: 10,
      paddingTop:10
    },
    tabStyle: {
      width: Dimensions.get('window').width / 3,
    },
    style: {
      backgroundColor: '#38A1F3',
      height: 80
    },
    indicatorStyle: {
      backgroundColor: '#fff',
    },
    activeTintColor : 'white',
    inactiveTintColor : '#ddd',
    showIcon : true,
    showLabel: true
  }
}
);
const DrawerContent = (props) => (
  <ScrollView contentContainerStyle={{flexGrow: 1 }}>
  <View
  style={{
  paddingTop: 35,
  paddingBottom : 35,
  backgroundColor: '#38A1F3',
  alignItems: 'center',
  justifyContent: 'center',
  color: '#FFF'
  }}
  >
  <Image
  source={require('./assets/logo.png')}
  style={{width:110,height:110 , marginBottom: 10,borderColor:'#FFF',borderWidth:0}}
   />
 </View>
 <View style={{  backgroundColor: '#FFF',alignItems: 'flex-start',justifyContent: 'center',marginTop:40,marginLeft:20}}>
  <DrawerItems {...props} 
   getLabel = {(scene) => (
    <View style={styles.button}>
     <Image source={arry[props.getLabel(scene)]}  style={{marginRight:20,width:24,height:24}} />
      <Text style={styles.buttonText}>{props.getLabel(scene)}</Text>
    </View>
   )}
  />
  </View>
  </ScrollView>
  )
  const arry = {Home:require('./assets/home.png'),Days:require('./assets/icon.png')};

const AppDrawerNavigator = createDrawerNavigator({
  Home: TabBarNavig,
  Days: Dating
},
{
  contentComponent: DrawerContent,
}
)
 const Routes = createSwitchNavigator({
  App: AppDrawerNavigator
})
export default Routes;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText:{
    color:'#000',
    fontStyle: 'italic',
    fontSize: 16,
  },
  button:{
   flexDirection: 'row',
   paddingBottom : 20
  }
});

Answer 1

据我所知，根据文档，在createBottomTopNavigator中，没有添加菜单左侧或右侧文档的选项

您可以通过导航设置左图标组件的选项，如下所示

static navigationOptions = ({navigation}) => ({
     headerLeft:  <Icon name='....' ....../>,
     headerRight: <Icon name='....' ....../>
})