React native学习第三章：样式

最新推荐文章于 2025-07-02 09:34:15 发布

原创最新推荐文章于 2025-07-02 09:34:15 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了React Native中样式叠加的问题，特别是在多个样式应用于同一组件时颜色无法按预期叠加的情况。通过具体的代码示例，展示了不同样式组合的效果，并提出了疑问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

class LotsOfStyles extends Component {
  render() {
    return (
      <View style={styles.sizemake}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
 
      </View>
    );
  }
}

const styles = StyleSheet.create({         
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
    sizemake:{
        width:200,
        height:300,
        backgroundColor:'green',
    },
});

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfStyles);

RNA有严格的大小写区别， <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>

并没有实现想象中的，前面是蓝色后面是红色，原因未知，带着问题出发