Question

我只是在尝试对抽屉中的内容进行样式设置。我目前有一个主页和SettingsScreen，我只想在菜单上设置文字样式

我尝试使用contentOptions，但是将其删除，因为它不起作用，也许是我错位了它的结构。请帮助

import * as React from 'react';
import { Text, View, Image, ScrollView, StyleSheet } from 'react-native';
import {
  createDrawerNavigator,
  createAppContainer,
  DrawerItems,
  SafeAreaView,
  contentOptions
} from 'react-navigation';
import home from './home'
import SettingScreen from './SettingScreen'

class Home extends React.Component {


  render() {
    return (
      <View style={styles.container}>
        <Map/> 
      </View>
    );
  }
}





const Navigator = createDrawerNavigator(
  {
    Home: {
    screen: home
  },

   Settings: {

 screen: SettingScreen  

   },
    contentOptions : {

color:'White'
},
      },

  {

    drawerBackgroundColor: '#262A2C',

  }
);

 export default createAppContainer(Navigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  }
});

Answer 1

您要在contentOptions中添加RouteConfigs，应将contentOptions添加到DrawerNavigatorConfig中。

const RouteConfigs = {
  Home: {
    screen: Home,
  },

  Settings: {
    screen: SettingScreen,
  },
};

const DrawerNavigatorConfig = {
  intialRouteName: 'Home',
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      color: 'white',
    },
  },
  contentOptions: {
    // add your styling here 
    activeTintColor: '#e91e63',
    itemsContainerStyle: {
      marginVertical: 0,
    },
    iconContainerStyle: {
      opacity: 1,
    },
  },
  drawerBackgroundColor: '#262A2C', // sets background color of drawer
};

const Navigator = createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

Example demo

如何设计抽屉内容？

1 个答案: