React Native：是否可以设置抽屉内容的颜色和大小？

Question

有没有一种样式来设置抽屉内容的颜色和大小？

1. 我想用颜色和大小为抽屉的“设置”内容设置样式，但不知道该怎么做。

2. 我要从抽屉中删除“关闭菜单”。我试图删除它，该应用程序开始自动直接打开设置屏幕，我不明白为什么会发生它。

const PlacesNavigator = createStackNavigator(
  {
    screen1: WaterQualitySamplesScreen, // FUNCTIONAL COMPONENT.
    screen2: AreasPrototypesScreen, // CLASS COMPONENT.
    screen3: PrototypePointsScreen,
    screen4: ListOfPerformanceRequirementsScreen,
    screen5: ContainersForSampling_1,
    screen6: ContainersForSampling_2,
    screen7: ContainersForSampling_3,
    settings: SettingsScreen,
  },
  {
    mode: 'modal',
    defaultNavigationOptions: {
      headerStyle: {
        // animationEnabled: true,
        backgroundColor: Platform.OS === 'android' ? Colors.primary : '',
      },
      headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
    },
  }
);

//////////////////////

const SettingsNavigator = createStackNavigator(
  {
    settings: SettingsScreen,
  },
  {
    navigationOptions: {
      drawerIcon: (drawerConfig) => (
        <Ionicons
          name={Platform.OS === 'android' ? 'md-settings' : 'ios-settings'}
          size={23}
          color={drawerConfig.tintColor}
        />
      ),
    },
  }
);

////////////////////

const MainNavigatopr = createDrawerNavigator(
  {
    'close menu': PlacesNavigator,////THIS CLOSE MENU I WANT TO DELETE AND DONT SHOW IT///
    settings: SettingsNavigator,  ////THIS SETTINGS I WANT STYLE///
  },
  {
    contentComponent: (props) => (
      <SafeAreaView style={styles.container}>
        <View
          style={{
            height: 220,
            alignItems: 'center',
            justifyContent: 'center',
            paddingTop: 60,
            paddingBottom: 20,
          }}
        >
          <Image
            source={require('../assets/drawer_image.png')}
            style={{ width: '100%', height: '100%' }}
            resizeMode="contain"
          />
          <View style={styles.sidebarDivider}></View>
        </View>
        <ScrollView>
          <DrawerItems {...props} />
        </ScrollView>
      </SafeAreaView>
    ),
  }
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sidebarDivider: {
    height: 1,
    width: '100%',
    backgroundColor: 'lightgray',
    marginVertical: 10,
  },
});

export default createAppContainer(MainNavigatopr);

Answer 1

您可以为问题1做类似的事情

const SettingsNavigator = createStackNavigator(
  {
    settings: SettingsScreen,
  },
  {
    initialRouteName:settings,
    navigationOptions: {
      title: 'Settings',
      style: settingStyle.header, // you can create a different style sheet and import in here
      titleStyle: settingStyle.headerTitle,
      tabBarIcon: ({ tintColor }) => (
        <Image source={settingActive} style={[{ tintColor }]} />
      ),
    } as NavigationBottomTabOptions,
  },
);

并且如果要在活动和不活动时更改选项卡设置，则>]

SettingScreens.navigationOptions = () => {
  const navigationOptions: NavigationBottomTabOptions = {};
  navigationOptions.tabBarLabel = ({ focused }: any) =>
    focused ? (
      <Text style={styles.fontBoldCenter}> Setting</Text>
    ) : (
      <Text style={styles.fontCenter}> Setting</Text>
    );
  navigationOptions.tabBarIcon = ({ focused }) =>
    focused ? (
      <Image source={settingActive} />
    ) : (
      <Image source={settingInactive} />
    );

  return navigationOptions;
};