Javascript React native忽略样式表中的所有容器样式_Javascript_Css_Reactjs_React Native_Rendering

Javascript React native忽略样式表中的所有容器样式

javascript css reactjs react-native

Javascript React native忽略样式表中的所有容器样式,javascript,css,reactjs,react-native,rendering,Javascript,Css,Reactjs,React Native,Rendering,这是我的密码： 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}> &

这是我的密码：

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'
  }
});

这就是它看起来的样子，但没有应用任何样式：

背景至少应该是fff，它看起来像flex:1因为某种原因可能不起作用？如果flex:1不起作用，它会否定样式表中的其他样式吗？

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

主要的问题是ShortcutsHome类，您必须用style={}替换styles={}：

您的课程应如下所示：

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'
  }
});

主要问题是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'
  }
});

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