如何在本机动态中设置默认样式和用户定义样式？答案

【问题标题】：how to setup default style and user defined style in react native dynamically?如何在本机动态中设置默认样式和用户定义样式？
【发布时间】：2017-12-19 01:56:42
【问题描述】：

在我的 react native 应用程序中，我只是尝试添加一个名为 RoundImageComponent 的共享组件，并添加了一个 RoundImageComponent.style 来添加 css 样式。使用此圆形图像组件时，图像的宽度将根据应用程序的要求作为道具传递。在某些情况下，宽度不会被添加到组件标签中，如下所示，

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;

当用户将宽度作为道具传递时，图像宽度应覆盖为默认宽度，否则图像宽度应保持为默认宽度。可以用这种方式吗？

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

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

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

现在我想在不同级别设置不同的颜色，然后说红色和绿色

为red

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

为green

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

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

【讨论】：

这个“”对我有用。谢谢
当使用这个 "" 时，会出现错误 "Can '找不到变量 :props"
你需要从你的调用中发送名称风格的道具，如果是有状态的组件，它应该是 this.props.style 其他明智的 props.state 对于 presentational 组件
那么，“...props.style”是什么意思？
我认为有一个错字，{[{fontFamily:"Lato", color:"#000", ...props.style}]}> 应该是：{[{fontFamily:"拉托", color:"#000"}, ...props.style]}>

【解决方案2】：

是的，有可能。

你可以通过在它后面传递另一个来覆盖当前的样式属性。它看起来像这样：

const styles = StyleSheet.create({
  default: {
    backgroundColor: red,
    color: blue,
  },
});

<View>
  <DefaultComponent style={styles.default} />
  <CustomComponent style={[styles.default, { backgroundColor: none }]} />
</View>

希望对你有帮助

【讨论】：