gpt4 book ai didi

css - 如何在动态 react native 中设置默认样式和用户定义样式?

转载 作者:行者123 更新时间:2023-12-05 08:54:57 25 4
gpt4 key购买 nike

在我的 React native 应用程序中,我只是想添加一个名为 RoundImageComponent 的共享组件,并添加一个 RoundImageComponent.style 来添加 css 样式。当使用这个圆形图像组件时,图像的宽度将根据应用程序的要求作为 Prop 传递。在某些情况下,宽度不会添加到组件标签中,如下所示,

RoundImageComponent width={90} roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />

RoundImageComponent roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />

RoundImageComponent代码

import React from 'react';
import {
Text,
View,
} from 'react-native';
import Config from 'react-native-config';
import SplashScreen from 'react-native-splash-screen';
import RoundImageComponent from "./shared/avatar/RoundImageComponent";
import styles from './App.styles';

const resolveSession = async () => {
// const session = sessionActions.getSession();
SplashScreen.hide();
};

setTimeout(() => {
resolveSession();
}, 2000);

const App = () => (
<View style={styles.container}>
<RoundImageComponent width={90}roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
</View>
);

export default App;

圆形图像组件

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

import { container, primaryText } from '../../theme/base';


export const defaultImage = {
height: 100,
borderRadius: 50,
width: 100
}
const styles = StyleSheet.create({
container: {
...container,
},
userDefinedImage: {
...defaultImage,
width: 40
}
});

export default styles;

当用户将宽度作为 prop 传递时,图像宽度应覆盖为默认宽度,否则图像宽度应保持默认宽度。有可能用这种方式吗?

最佳答案

这可以通过将 Prop 传递给样式来实现。假设这是我的 CustomTextComponent:

export CustomTextComponent = (props)=>{
return (
<Text style={[{fontFamily:"Lato", color:"#000", ...props.style}]}>
{props.children}
</Text>
)
}

现在我想在不同的级别设置不同的颜色让我们说红色和绿色

代表红色

<CustomTextComponent style={{color:'red'}}> 
red colored text
</CustomTextComponent>

代表绿色

<CustomTextComponent style={{color:'green'}}> 
red colored text
</CustomTextComponent>

注意:您的 ...props.style 应该在您的默认样式之后。因为你最后提到的将覆盖前一个。在某些情况下,您还可以使用默认 Prop 值。(lib PropsType)

关于css - 如何在动态 react native 中设置默认样式和用户定义样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47869418/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com