Question

我具有createMaterialTopTabNavigator和createDrawerNavigator导航系统，我尝试在createMaterialTopTabNavigator的左上角找到一个菜单栏图标，但是直到现在我仍无法弄清楚如何在特定位置添加此元素，是否有对可能与这种情况相对应的本国财产做出反应，请您帮忙

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 中，根据文档，没有选项可以向左或向右docs添加菜单

您可以通过这样的组件的navigationOptions设置左侧图标

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

在React Native中如何构建嵌套导航

1 个答案: