Question

我正在尝试使用自定义组件进行抽屉布局。以下是我自定义的抽屉组件：

CustomDrawer.js：

class CustomDrawer extends Component {

  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 1
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}>
              Page1
              </Text>
            </View>
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}>
                Page2
              </Text>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}>
                Page3
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

CustomDrawer.propTypes = {
  navigation: PropTypes.object
};

export default CustomDrawer;

const styles = StyleSheet.create({
  container: {
     paddingTop: 20,
     flex: 1
   },
   navItemStyle: {
     padding: 10
   },
   navSectionStyle: {
     backgroundColor: 'lightgrey'
   },
   sectionHeadingStyle: {
     paddingVertical: 10,
     paddingHorizontal: 5
   },
   footerContainer: {
     padding: 20,
     backgroundColor: 'lightgrey'
   }
});

以下是我的 router.js ：

const mapNavigationStateParamsToProps = (SomeComponent) => {
  return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
            const {navigation: {state: {params}}} = this.props
            return <SomeComponent {...params} {...this.props} />
        }
    }
}

export const MainScreenNavigator = TabNavigator({
 Home: {
   screen: Home,
  navigationOptions : {
     tabBarLabel: 'Home',
     tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
   },
 },
 MyCards: {
   screen: MyCards,
   navigationOptions : {
    tabBarLabel: 'My Cards',
    tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
  },
 },

},
 {
   tabBarPosition: 'bottom',
   animationEnabled: true,
   tabBarOptions: {
     activeTintColor: '#e91e63',
   },
 },
);

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  }, {
    contentComponent: CustomDrawer,
    drawerWidth: 300
  }

);

drawerNavigation.navigationOptions = {
    header: null,
};

export const AppNavigation = StackNavigator({
    LoginScreen: { screen: Login},
    SignUpScreen: { screen: SignUp },
    Tabs: { screen: drawerNavigation},
    AddCard: { screen: AddCard },
    GetCard: {screen: GetCard},
    SearchedUserProfile: {screen: mapNavigationStateParamsToProps(SearchedUserProfile) }
  },
  {
   headerMode: 'screen'
 });

当我运行应用程序时，我收到以下错误：

无法读取属性＆＃39; routeName＆＃39;未定义的

我在routerName中使用CustomDrawer。谁能告诉我我做错了什么？

Answer 1

我通过添加：

解决了这个问题

 drawerOpenRoute: 'DrawerOpen',
 drawerCloseRoute: 'DrawerClose',
 drawerToggleRoute: 'DrawerToggle',

完整的抽屉导航器：

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  },{
      contentComponent: SideMenu,
      drawerWidth: 300,
      drawerOpenRoute: 'DrawerOpen',
      drawerCloseRoute: 'DrawerClose',
      drawerToggleRoute: 'DrawerToggle',
  });

希望有所帮助

无法读取属性＆＃39; routeName＆＃39;未定义的反应导航

1 个答案: