将StyleSheet传递给react组件

m0rkklqb 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(128)

我在我的项目中有一个样式文件，在那里我定义了一些样式表。现在，在我的App.tsx中，我导入这些样式表，并希望将它们传递给我创建的一个组件作为 prop 。
styles.tsx:

import React from 'react';
import { StyleSheet } from 'react-native';

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

component.tsx:

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:

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;

react-native

来源：https://stackoverflow.com/questions/77239394/passing-stylesheet-to-a-react-component

1条答案

按热度按时间

ha5z0ras1#

可以这样传递StyleSheet，但不推荐。顺便说一句，你走在正确的道路上。
因为你使用的是Typescript，所以声明类型是很重要的。

样式.tsx

import { StyleSheet } from 'react-native';

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

export default styles; // Use 'export default' to export the styles object

component.tsx

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

interface ComponentProps  {
    style1: ViewStyle; // Specify the type for style1
    style2: ViewStyle; // Specify the type for style2
}

const Component: React.FC<ComponentProps> = (props) => {
    return (
        <View style={props.style1}>
            <View style={props.style2}>
                <Text>
                    just a text
                </Text>
            </View>
        </View>
    );
};

export default Component;

app.tsx

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

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

export default App;

赞(0）回复(0）举报 2023-10-22

我来回答

将StyleSheet传递给react组件

1条答案

相关问题

热门标签

最新问答