React Native仅使用JavaScript来样式化我们的核心组件。我们不需要任何特殊的语言或语法来定义样式。所有核心组件都使用一个名为style的prop属性。样式名称和值类似于适用于网络的CSS。使用驼峰式大小写方式的唯一区别是,例如fontSize而不是font-size。
通过使用内联样式和通过StyleSheet.create,可以使用不同的方法来设计组件。随着组件的复杂性增加,最好使用StyleSheet.create在一个地方定义几种样式。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-style.html
来源:LearnFk无涯教程网
在此示例中,我们将同时使用内联样式和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', }, });
输出
我们还可以使用外部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> ); } }
输出
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)