如何使用React Native样式表？

Without wasting much time, a style sheet as commonly known in a CSS is an object or block of code of many styling properties and values which is applied in a code when called.

在不浪费大量时间的情况下，CSS中通常已知的样式表是具有许多样式属性和值的代码的对象或代码块，该对象或代码块在调用时应用于代码中。

It's almost the same as in CSS but has a little different regarding some naming conventions.

它几乎与CSS中的相同，但在某些命名约定方面有所不同。

In react native, a style sheet is created by initiating a constant, assigning it to a styleSheet.create function as seen below.

在react native中，样式表是通过启动一个常量并将其分配给styleSheet.create函数创建的 ，如下所示。

The style sheet is then invoked or called by passing an inline style reference using a single curly brace.

然后通过使用单个花括号传递内联样式引用来调用或调用样式表。

Open your App.js file and type the following,

打开您的App.js文件，然后输入以下内容：

import * as React from 'react';
import { Text, View, StyleSheet, Button, TextInput } from 'react-native';
export default function App() {
return (
<View style={styles.box}>
<View style={styles.container}>
<TextInput style={styles.myinput} />
<Button title="GO" />
</View>
</View>
);
}
const styles = StyleSheet.create({
box: {
padding: 50,
},
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
myinput: {
Width: '80%',
borderBottomColor: 'black',
padding: 10,
borderBottomWidth: 1,
},
});

Output

输出量