React-native正在忽略StyleSheet中我所有的容器样式

Question

这是我的代码：

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可能由于某种原因无法正常工作？如果flex: 1无法正常工作，是否会将styles的其余部分StyleSheet排除掉？

Answer 1

主要问题是ShortcutsHome类，您必须在其中将styles = {}替换为style = {}：

您的课程应如下：

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

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

Answer 2

我使用的是styles=而不是style=，只是一个错字。