' DrawerOpen' react-native

时间:2018-05-24 06:29:50

标签: react-native react-native-android

使用react-native

"反应":" 16.0.0",

"反应原生":" 0.50.4",

并使用' react-navigation 1.0'

一切运作良好但是当我按下抽屉菜单打开它工作打开但它的隐形只显示底色(黑色)

我试图删除另一个堆栈导航器上的标头组件。或者在DrawerComponent中查找问题。但还是想不通。

当我没有更改为Tab Navigation时,它工作正常,我需要添加Tab Navigator以便更改它。

请帮帮我

problem

const RootNavigator = StackNavigator({
  Init : { screen : InitComponent },
  Root : { screen : TabStack },
 })

const TabStack = TabNavigator({
    DrawerStack: { screen : DrawerStack, },
    AddrDrawerStack : {screen : AddrDrawerStack},
    StorageDrawerStack : {screen : StorageDrawerStack},
},
{
   navigationOptions:({navigation})=>({
   header:<HeaderContainer navigation={navigation} />,
   tabBarIcon : ({focused, tintColor}) =>{
    const { routeName } = navigation.state;
    return <FontAwesome size={25} color={tintColor}>{icon}</FontAwesome>;
   },
 }),
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  tabBarOptions: {
  activeTintColor: 'tomato',
  inactiveTintColor: 'gray',
},
//animationEnabled: false,
swipeEnabled: true,

 })


  const DrawerStack = DrawerNavigator({    
    MailStack : {screen: MailStack},
   }, {
    gesturesEnabled: false,
    contentComponent: DrawerContainer,

   })

** DrawerContainer.js **

class DrawerContainer extends React.Component {


  constructor(props, context){
    super(props,context);

    this.state = {
      selectMenu: false,
    }
    this.props.getMailboxMenuList();
    this.menuClick = this.menuClick.bind(this);

  }


  menuClick(menuName){  

    this.setState({
        selectMenu: true,
    });
    this.props.mailBoxChange(menuName)
    this.props.navigation.navigate("DrawerStack", {menu:menuName});
  }



  render() {


    const { navigation, mailboxMenuList } = this.props;


   if(!mailboxMenuList){

    return (

      <View style={styles.container}>
          <Text>try again</Text>    
     </View>

     )
   }    

    return (

      <View style={styles.container}>
         <View style={styles.menuMailTop}> 

             <TouchableHighlight 
               onPress={()=>{this.props.navigation.navigate("PostScreen",{type:'write'})}}
               style={styles.menuMailBoxBtn} >
                <Text> write </Text>
           </TouchableHighlight> 

        </View>

        <View>
          {
            mailboxMenuList.items? <BasicMailBox 
                                        mailList={mailboxMenuList.items}
                                        onReloadClick={this.props.reloadExternalMailbox.bind(this)}
                                        externalLoading={this.props.externalLoading}
                                        selectMenu ={this.state.selectMenu}
                                        menuClick={this.menuClick.bind(this)} />
            :<View></View>
          }
      </View>         
  </View>

  ) }
  }

**抽屉打开方法**

  <TouchableHighlight
       onPress= {() => {  
              //when i press this, index indicates 0  
            if (navigation.state.index === 0) {
                                         navigation.navigate('DrawerOpen')
                                      //  navigation.openDrawer()
                                  } else {
                                        navigation.navigate('DrawerClose')
                                  }
                                }
                          } >
                    </TouchableHighlight>

0 个答案:

没有答案