如何使用reactnative向您的应用程序添加样式或CSS？-js教程-PHP中文网

可以按如下方式设置应用程序的样式 -

使用样式表组件
使用内联样式

使用样式表组件

当您想要将样式应用到应用程序时，React 原生样式表组件非常方便且简洁。要使用样式表组件，首先将其导入，如下所示 -

import { StyleSheet } from 'react-native';

您可以使用样式表组件创建样式，如下所示 -

const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

上面的样式可以在你的代码中使用如下 -

这里是一个使用样式表来显示 FlatList 组件的示例 -

立即学习“前端免费学习笔记（深入）”；

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

下载

示例 1

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {
      return (
         
            
               {item.name}
            
         
      );
   };
   render() {
      return (
         
             item.name}
               stickyHeaderIndices={this.state.stickyHeaderIndices}
            />
         
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

输出

如何使用reactnative向您的应用程序添加样式或CSS？

使用内联样式

您可以使用 style 属性来添加内联样式。然而，这不是最佳实践，因为它可能很难阅读代码。这是一个关于如何在reactnative组件中使用内联样式的工作示例

示例2

导出默认应用程序;

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
   return (

输出

如何使用reactnative向您的应用程序添加样式或CSS？