子组件样式不起作用，但是当我在子组件中保存代码时，热重载样式之后将应用于子组件

Question

我创建了一个包含菜单项的自定义抽屉。一共有三个部分 1.自定义抽屉 2.抽屉菜单 3.MenuItem

当我使用react-native run-android测试apk时，定义到子组件（MenuItem）的样式不起作用。但是在子组件代码中热重新加载后，它可以正常工作。我需要在第一次加载时应用样式。

1.CustomDrawer

import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import * as menuData from './../database/appMenu.json';
import DrawerMenu from './DrawerMenu.js';
import DrawerMenuHeader from './DrawerMenuHeader.js';

class CustomDrawer extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const AppMenu = menuData.fcAppMenu; // Drawer Menu list
    const menuHeader = menuData.menuHeader; // Drawer header image and heading
    return (
      <ScrollView >
        <DrawerMenuHeader Header={menuHeader} />
        <View key='AppMenu' />
        <DrawerMenu navigationOptions={this.props.navigation} AppMenu={AppMenu} />
      </ScrollView>
    );
  }
}

styles = StyleSheet.create({
  container: {
    paddingTop: 20,
    flex: 1,
  },
  lineStyle: {
    borderWidth: 0.5,
    borderColor: 'black',
    margin: 10,
  },

});

export default CustomDrawer;

2.DrawerMenu

import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import MenuItem from './MenuItem';

export default class DrawerMenu extends Component {
  constructor(props) {
    super(props);
    this.toggleItemView = this.toggleItemView.bind(this);
    this.state = {
      menuList: [],
    };
  }

  toggleItemView = ItemKey => {
    let menuList = [];
    if (this.state.menuList[ItemKey] === undefined) {
      menuList[ItemKey] = true;
    }
    else {
      menuList[ItemKey] = !this.state.menuList[ItemKey];
    }
    this.setState({ menuList: menuList });
  };

  render() {
    const { AppMenu, navigationOptions, childElement } = this.props;
    return (
      <View>
        {AppMenu.map((menu, mainIndex) => (
          <View
            style={childElement ? styles.navSectionStyle : styles.container}
            key={mainIndex}>
            <TouchableOpacity
              onPress={() => menu.subMenu.length > 0 ? this.toggleItemView(mainIndex) : navigationOptions.navigate(menu.routeName)
              }>
              <MenuItem name={menu.name} img={menu.img} childElement={childElement}/>
            </TouchableOpacity>
            {menu.subMenu && menu.subMenu.length > 0 &&
              this.state.menuList[mainIndex] &&
              <DrawerMenu
                AppMenu={menu.subMenu}
                childElement={true}
                navigationOptions={navigationOptions}
              />
            }
          </View>
        ))}
      </View>
    )
  }
}


styles = StyleSheet.create({
  container: {
    paddingTop: 4,
    // flexDirection:'row',
    // justifyContent:'space-between'
  },
  navSectionStyle: {
    backgroundColor: '#e5e5e5',
    paddingLeft: 10,
    // flexDirection:'row',
    // justifyContent:'space-between'
  },
});

3.MenuItem

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';

export default MenuItem = (props) => {
    const {name,img,childElement} = props;
    return(
    <View style = { styles.inlineImageText } key={name}>
            <Image
                source={require("../assets/icons/profile.png")}
                style={styles.iconSize}
            />
            <Text
                style={
                    childElement ? styles.navItemStyle : styles.sectionHeadingStyle
                }>
                {name}
            </Text>
    </View>
    )
}

styles = StyleSheet.create({
    inlineImageText: {
      flexDirection: 'row',
      alignItems: 'center'
    },
    iconSize: {
      width: 20,
      height: 20
    },
        sectionHeadingStyle: {
      paddingHorizontal: 5,
      fontSize: 15,
      // fontWeight: 'bold'
    },
    navItemStyle: {
      padding: 4,
      borderColor: '#848484',
      borderBottomWidth: 1,
      fontSize: 13
    },
    navSectionStyle: {
      backgroundColor: '#e5e5e5',
      paddingLeft: 10,
      // flexDirection:'row',
      // justifyContent:'space-between'
    },
  });