React Native 风格的 Prop

在 React Native 中，我们可以使用 JavaScript 为我们的应用程序设置样式。所有核心组件都接受一个名为 style 的道具。样式名称和值通常与 CSS 在 Web 上的工作方式相匹配，但名称使用驼峰式大小写。

style 属性可以是一个普通的旧 JavaScript 对象。我们还可以传递一组样式。

句法：

...
OR
...

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

项目结构：

示例：现在让我们使用 style 属性为任何文本或任何组件设置样式。在这里，我们将设置背景颜色为绿色以使按钮居中。

App.js

import React from 'react';
import { StyleSheet,
        Text,
        View,
        Button,
        Alert
        } from 'react-native';
  
export default function App() {
  
// Alert function
const alert = ()=>{
    Alert.alert(
    "GeeksforGeeks",
    "A Computer Science Portal",
    [
        {
        text: "Cancel",
        },
        {
        text: "Agree",
        }
    ]
    );
}
  
return (
    
      
    
);
}
  
const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
},
});

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

npm run android

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

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