内容组件中其他(抽屉)项目的样式

时间:2019-09-06 11:29:53

标签: react-native react-navigation

我的本​​机应用程序中有一个抽屉。不幸的是,我不知道如何设置附加组件的样式(MenuDrawerItem),以使其外观和感觉与由createDrawerNavigation操作注入的抽屉项目相同(特别是如果您触摸“配置文件”或“首选项”的Drawer项时的行为)。有人知道我在哪里可以找到DrawerItems的样式吗?或者如何将这种样式应用于“ MenuDrawerItems”?

const MenuDrawerItem = (props) => {
  return <TouchableOpacity onPress={props.onPress} >
    <View style={styles.item}>
      <View style={styles.iconContainer}>
        {createDrawerIcon(props.icon)}
      </View>
      <Text style={styles.label}>{props.text}</Text>
    </View>
  </TouchableOpacity >
}

const MenuDrawer = (props) => (
  <ScrollView contentContainerStyle={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between' }}>
    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
      <MenuDrawerItem onPress={() => this.handleHome(props.navigation)} text={props.screenProps.t('app.title')} icon={'home'} />
      <DrawerItems {...props} />
    </SafeAreaView>
    <MenuDrawerItem onPress={() => this.handleLogout(props.navigation)} text={props.screenProps.t('button.logout')} icon={'log-out'} />
  </ScrollView>
);

const menuNavigator = createDrawerNavigator({
  ProfileStack,
  PreferencesStack
}, {
    drawerPosition: 'right',
    contentComponent: props => <MenuDrawer {...props} />,
    contentOptions: {
      activeTintColor: Colors.main
    },
    initialRouteName: 'ProfileStack'
  }
);

0 个答案:

没有答案