Как оформить содержимое ящика?

Question

Я просто пытаюсь стилизовать содержимое своих ящиков. В настоящее время у меня есть домашняя страница и экран настроек. Я просто хочу оформить текст в меню

Я пытался использовать 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);

Пример демо