react native正在忽略样式表中的所有容器样式

这是我的代码:

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

export default class ShortcutsHome extends React.Component {
  render() {
    return (
      <View styles={styles.container}>
        <View styles={[styles.four_six, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('four')}>
              <Text>4 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('six')}>
              <Text>6 hrs</Text>
          </TouchableOpacity>
        </View>
        <View styles={[styles.twelve_twenty_four, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('twelve')}>
              <Text>12 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('twenty_four')}>
              <Text>24 hrs</Text>
          </TouchableOpacity>
        </View>
        <View styles={[styles.daily_custom_daily, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('daily')}>
              <Text>Daily</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('custom_daily')}>
              <Text>Custom Daily</Text>
          </TouchableOpacity>
        </View>
        <View styles={styles.weekly}>
          <TouchableOpacity
            onPress={() => this.methodSelect('weekly')}>
              <Text>Weekly</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  methodSelect = (strategy) => {
    const { navigate } = this.props.navigation;
    switch(strategy) {
    case 'four':

      break;
    case 'six':

      break;
    case 'twelve':

      break;
    case 'twenty_four':

      break;
    case 'daily':
      navigate('Tpd', { strategy: 'daily' });
      break;
    case 'weekly':
      navigate('Tpd', { strategy: 'weekly' });
      break;
    case 'custom_daily':
      navigate('Tpd', { strategy: 'custom_daily' });
      break;
    default:
      alert("Something went wrong when selecting your strategy, please try again.");
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  section: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  four_six: {
    backgroundColor: '#ccc'
  },
  twelve_twenty_four: {
    backgroundColor: '#aaa'
  },
  daily_custom_daily: {
    backgroundColor: '#eee'
  },
  weekly: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  }
});

它从导航器加载:

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import ShortcutsHome from '../pages/ShortcutsHome';
import Tpd from '../pages/Tpd';
import SelectHours from '../pages/SelectHours';

const ShortcutsNavigator = createStackNavigator({
  ShortcutsHome: {
    screen: ShortcutsHome,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  },
  Tpd: {
    screen: Tpd,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  },
  SelectHours: {
    screen: SelectHours,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  }
},
{
  initialRouteName: 'ShortcutsHome'
});

export default ShortcutsNavigator;

这就是它看起来的样子,但是没有一个样式被应用:

背景至少应该是 #fff ,看起来 flex: 1 可能因为某种原因不能工作?如果 弹性:1 不起作用,它会否定 styles 从 StyleSheet 是吗?