React Native Style

17 Mar 2025 | 阅读 2 分钟

React Native 只是使用 JavaScript 来样式化我们的核心组件。我们不需要任何特殊的语言或语法来定义样式。所有核心组件都使用名为 style 的属性（property）。样式名称和值与 Web 适用的 CSS 相似。唯一的区别是使用驼峰式大小写方式书写名称，例如 fontSize 而不是 font-size。

style 属性是一个普通的 JavaScript 对象，这是样式化代码的最简单方法。

有不同的方法来设计我们的组件，通过使用内联样式和使用 StyleSheet.create。随着组件复杂性的增加，最好使用 StyleSheet.create 在一个地方定义多个样式。

React Native 样式示例 1

在此示例中，我们将同时使用内联样式和 StyleSheet.create。内联样式应用于创建组件的位置。

App.js

 import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class ImplementingStyle extends Component {
    render() {
        return (
            <View>
                <Text style={{ backgroundColor: '#a7a6a9', color: 'yellow', fontSize: 20 }}>this is inline style</Text>
                <Text style={styles.green}>just green</Text>
                <Text style={styles.biggray}>just biggray</Text>
                <Text style={[styles.biggray, styles.green]}>biggray, then green</Text>
                <Text style={[styles.green, styles.biggray]}>green, then biggray</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    biggray: {
        color: 'gray',
        fontWeight: 'bold',
        fontSize: 30,
    },
    green: {
        color: 'green',
    },
});

输出

React Native 样式示例 2

我们还可以使用外部 JavaScript 文件来样式化我们的应用程序。在此示例中，我们创建外部 JS 文件并将其导入到我们的 App.js 文件中。

StyleComponent.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const StyleComponent = (props) => {
    return (
        <View>
            <Text style = {styles.myState}>
                {props.myState}
            </Text>
        </View>
    )
}
export default StyleComponent

const styles = StyleSheet.create ({
    myState: {
        marginTop: 20,
        textAlign: 'center',
        color: 'green',
        fontWeight: 'bold',
        fontSize: 20
    }
})

App.js

 import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import StyleComponent from './StyleComponent'

export default class App extends React.Component {
    state = {
        myState: 'This is my state, style through external style'
    }
    render() {
        return (
            <View>
                <StyleComponent myState = {this.state.myState}/>
            </View>
        );
    }
}

输出

下一个主题高度和宽度

← 上一个下一个 →

React Native Style

React Native 样式示例 1

React Native 样式示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native Style

React Native 样式示例 1

React Native 样式示例 2

相关帖子

使用 Flex 定位元素

React Native Props

高度和宽度

React Native Switch

React Native View

React Native ListView

React Native TextInput

React Native WebView

React Native Button

React Native FlatList

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器