React Native EStyleSheet 如何应用多种样式答案

【问题标题】：React Native EStyleSheet how to apply multiple stylesReact Native EStyleSheet 如何应用多种样式
【发布时间】：2018-11-18 21:26:56
【问题描述】：

我是 React Native EStyleSheet lib 的新手。我觉得它真的很酷，但我想不通的一件事是，如何将多种样式应用于单个元素，就像我过去使用 style={{...styles.style1, ...styles.style2}} 处理常规样式一样？

render() {
    return <View style={estyles.container}>
        <View style={{...estyles.container, ...estyles.containerInner}}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

【问题讨论】：

试试style={[estyles.container, estyles.containerInner]}

标签： reactjs react-native react-native-stylesheet

【解决方案1】：

您可以使用样式数组将多个样式应用于单个视图

例子

<View style={[styles.container, styles.view,...]}>
</View>

【讨论】：

【解决方案2】：

您可以在样式数组中使用样式，例如：

render() {
    return <View style={estyles.container}>
        <View style={[estyles.container,estyles.containerInner]}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

this => [estyles.container,estyles.containerInner] 可以使用

【讨论】：