关注我们

React Native - Style

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

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

无涯教程网

Style示例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',
    },
});

输出

Style示例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>
        );
    }
}