时间戳

首页 > 解决方案 > 徽标未重定向到主页

react-native - 徽标未重定向到主页

问题描述

我最近在我的应用程序中实现了一个来自 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>

        )
    }
}

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

标签： react-native

解决方案

看来您创建 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);

推荐阅读