如何将StyleSheet作为props传递给React Native组件

以下是完整的实现方案，包含样式定义、自定义组件接收样式、主组件导入并传递样式的完整代码：

styles.tsx（样式定义文件） #

通过StyleSheet.create定义结构化样式集合，注意导出语法需使用export default（原代码中export style为错误写法）：

import { StyleSheet } from 'react-native';

const style = StyleSheet.create({
    t1: {
        flex: 1,
        alignItems: 'flex-end'
    },
    t2: {
        flex: 1,
        alignItems: 'flex-start'
    },
});
export default style;

component.tsx（自定义组件） #

自定义组件通过props接收外部传入的样式，并直接应用到对应View元素上：

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

const Component = (props) => {
    return (
        <View style={props.style1}>
            <View style={props.style2}>
                <Text>just a text</Text>
            </View>
        </View>
    );
};
export default Component;

App.tsx（主入口组件） #

导入样式文件和自定义组件，将样式集合中的具体样式作为props传递给自定义组件：

import React from 'react';
import Component from './component';
import style from './styles';

const App = () => {
    return (
        <Component style1={style.t1} style2={style.t2} />
    );
};
export default App;

关键细节 #

• 样式优化：使用StyleSheet.create创建样式，React Native会自动做性能优化和样式合法性验证，比直接使用普通对象更规范。
• 传递逻辑：通过自定义props字段（如style1、style2）灵活传递样式，子组件按需取值应用即可。
• 导入导出：样式文件用export default导出后，主组件可通过import 别名 from 文件路径的方式直接导入使用。

内容的提问来源于stack exchange，提问作者0x4141