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

【问题标题】：React-native is ignoring all of my container styles from StyleSheetReact-native 忽略了我在 StyleSheet 中的所有容器样式
【发布时间】：2018-11-16 16:45:25
【问题描述】：

这是我的代码：

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 不起作用，它是否会从StyleSheet 中否定styles 的其余部分？

【问题讨论】：

标签： javascript css reactjs react-native rendering

【解决方案1】：

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

【讨论】：

我在style-= 上花了大约 20 分钟

【解决方案2】：

主要问题是 ShortcutsHome 类，您必须将样式 = {} 替换为 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'
  }
});

【讨论】：