react native 组件中的样式有哪些不同的方式？

React Native 中的样式与普通的 CSS 不同。对于 React Native 中的样式元素，使用 JavaScript 对象。 React Native 中的每个核心组件都接受style属性，该属性接受一个包含 CSS 属性名称的 JavaScript 对象作为键。例如，在这些对象中使用的任何 CSS 属性都遵循驼峰式约定。使用背景颜色而不是背景颜色。

创建 ReactNative 应用和模块安装：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init demo-app
```
第 3 步：现在进入您的项目文件夹，即 demo-app
```
cd demo-app
```

项目结构：它将如下所示。

方法 1：使用内联样式：使用内联样式仅适用于非常小的组件。对于大规模生产应用程序，使用内联样式变得繁琐且效率低下。

App.js

import React from "react";
import { View, Image, Text, Button } from "react-native";
  
export default function App() {
  return (
    
      
        
      
      
        
          Styling in React Native
        
        
          Using Inline Styles
        
        
          Using inline styles is preferred only for small
          very small components. For large-scale production
          applications, it becomes cumbersome and 
          inefficient to use inline styles.

App.js

import React from "react";
import { View, Image, Text, Button, StyleSheet } from "react-native";
  
export default function App() {
  return (
    
      
        
      
      
        Styling in React Native
        Using StyleSheet
        
          As a component grows in complexity, it is much cleaner 
          and efficient to use StyleSheet.create so as to define 
          several styles in one place.

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

方法 2：使用 StyleSheet：随着组件变得越来越复杂，使用StyleSheet.create在一个地方定义多个样式会更加简洁和高效。

应用程序.js

import React from "react";
import { View, Image, Text, Button, StyleSheet } from "react-native";
  
export default function App() {
  return (
    
      
        
      
      
        Styling in React Native
        Using StyleSheet
        
          As a component grows in complexity, it is much cleaner 
          and efficient to use StyleSheet.create so as to define 
          several styles in one place.

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/stylesheet