Question

我最近在我的应用程序中实现了从React Navigation到我的抽屉菜单，上面放有一个徽标。我希望徽标可以单击，以便可以链接回主页。

我尝试使用React Navigation中的createDrawerNavigation组件。我认为该错误与错误地导出两个常量有关，但是我不熟悉正确的语法。

/*/ Drawer Menu /*/

const navigator = createDrawerNavigator(
  {
    Page1: Lander,
    Page2: Lander,
    Page3: Lander,
    Page4: Lander,
  },

  {
    contentComponent: (props) => ( 
      <SafeAreaView> 
        <Menu {...props}/> 
      </SafeAreaView> 
    )

  },
);
/*/ End of Drawer Menu /*/


/*/ Navigator Constants /*/
const AppNavigator = createStackNavigator({
  Home: {
    screen: Lander,
  },
},

  {
    initialRouteName: 'Home',
    headerMode: 'none',

});

export default createAppContainer(navigator, AppNavigator);

/*/ End of Navigator Constants /*/


/*/Drawer Menu with the Drawer Items and Logo inside /*/

export default class Menu extends React.Component {
    render() {
        return(
          <TouchableWithoutFeedback  onPress={() => this.props.navigation.navigate('Home')}>
            <Image source={require('../../Images/picture.png')} style = {styles.icon}/>
          </TouchableWithoutFeedback>


        <ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%',}}>
          <DrawerItems {...this.props}  activeTintColor='#2196f3' activeBackgroundColor='rgba(0, 0, 0, .04)' inactiveTintColor='rgba(0, 0, 0, .87)' inactiveBackgroundColor='transparent' style={{backgroundColor: '#000000'}} labelStyle={{color: '#ffffff', fontSize:30,}}   />
        </ScrollView>

        )
    }
}

当我单击徽标时，我没有收到错误消息，但是它没有重定向到任何地方。

Answer 1

似乎您在错误地创建AppContainer，如果不需要两个单独的StackNavigator，一种简单的方法是在DrawerNavigator中创建Home StackNavigator

    /*/ Drawer Menu /*/

const navigator = createDrawerNavigator(
  {
    Home: HomeStackNavigator
    Page1: Lander,
    Page2: Lander,
    Page3: Lander,
    Page4: Lander,
  },

  {
    contentComponent: (props) => ( 
      <SafeAreaView> 
        <Menu {...props}/> 
      </SafeAreaView> 
    )

  },
);
/*/ End of Drawer Menu /*/


/*/ Navigator Constants /*/
const HomeStackNavigator = createStackNavigator({
  Home: {
    screen: Lander,
  },
},

  {
    initialRouteName: 'Home',
    headerMode: 'none',

});

 export default createAppContainer(navigator);

徽标未重定向到主页

1 个答案: