React Native自定义组件样式冲突：组件1样式被组件2覆盖求助

问题根源是两个组件中的styles变量未使用const/let声明，导致其成为全局变量。当第二个组件加载时，会直接覆盖第一个组件的styles对象，最终Component1实际使用的是Component2的样式。同时你的JSX代码里还存在多余的]语法错误，也需要一并修正。

修正后的Component1代码 #

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

function Component1({children}) {
    return (<Text style={styles.component1Styles}>{children}</Text>);
}

const styles = StyleSheet.create({
    component1Styles: {
        fontFamily: 'open-sans',
        fontSize: 20,
        color: "white",
    }
})

export default Component1;

修正后的Component2代码 #

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

function Component2({children}) {
    return (<Text style={styles.component2Styles}>{children}</Text>);
}

const styles = StyleSheet.create({
    component2Styles: {
        fontFamily: 'open-sans-bold',
        fontSize: 30,
        color: "black",
    }
})

export default Component2;

关键说明 #

• 用const声明styles，使其成为组件模块的局部变量，彻底避免全局变量污染导致的样式覆盖问题。
• 移除了JSX中style属性末尾多余的]，修复语法错误保证组件正常渲染。

内容的提问来源于stack exchange，提问作者Nikitas IO