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

輸出量

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感謝您與我編碼！ 下次見。 隨意發表評論或問題。 上帝祝福你！

翻譯自: https://www.includehelp.com/react-js/how-to-use-react-native-style-sheet.aspx

總結

以上是生活随笔為你收集整理的如何使用React Native样式表？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。