04.style样式

最新推荐文章于 2024-11-22 10:58:21 发布

原创最新推荐文章于 2024-11-22 10:58:21 发布 · 334 阅读

CC 4.0 BY-SA版权

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

render() {
        return (
            <TouchableOpacity onPress={this._onClick} style={[styles.mangerBtn,{height:this.props.height}]}>
                    <Image style={styles.mangerImg} source={this.props.renderIcon}/>
                    <Text style={styles.mangerShowText}>{this.props.showText}</Text>
            </TouchableOpacity>
        );
    }

这个TouchableOpacity的样式height是通过props属性赋值所以,要先转化为数组然后给style设置样式

常见的做法是按顺序声明和使用style属性，以借鉴 CSS 中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。