久久棈精品久久久久久噜噜,久久亚洲春色中文字幕久久久,久久精品中文字幕久久

可以按如下方式設(shè)置應(yīng)用程序的樣式 –

使用樣式表組件
使用內(nèi)聯(lián)樣式

使用樣式表組件

當(dāng)您想要將樣式應(yīng)用到應(yīng)用程序時(shí)，React 原生樣式表組件非常方便且簡(jiǎn)潔。要使用樣式表組件，首先將其導(dǎo)入，如下所示 –

import { StyleSheet } from 'react-native';

您可以使用樣式表組件創(chuàng)建樣式，如下所示 –

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

上面的樣式可以在你的代碼中使用如下 –

<view style="{styles.container}"></view>

這里是一個(gè)使用樣式表來顯示 FlatList 組件的示例 –

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

示例 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 }) =&gt; { ? ? ? return ( ? ? ? ? ?<view style="{styles.item}"> ? ? ? ? ? ? <text style="{{" fontweight: : color:> ? ? ? ? ? ? ? ?{item.name} ? ? ? ? ? ? </text> ? ? ? ? ?</view> ? ? ? ); ? ?}; ? ?render() { ? ? ? return ( ? ? ? ? ?<view style="{styles.container}"> ? ? ? ? ? ? <flatlist> item.name} ? ? ? ? ? ? ? ?stickyHeaderIndices={this.state.stickyHeaderIndices} ? ? ? ? ? ? /&gt; ? ? ? ? ?</flatlist></view> ? ? ? ); ? ?} } const styles = StyleSheet.create({ ? ?container: { ? ? ? flex: 1, ? ? ? marginTop: StatusBar.currentHeight || 0, ? ?}, ? ?item: { ? ? ? margin: 10, ? ? ? padding: 20, ? ? ? marginVertical: 8, ? ? ? marginHorizontal: 16, ? ?} });

輸出

如何使用reactnative向您的應(yīng)用程序添加樣式或CSS？

使用內(nèi)聯(lián)樣式

您可以使用 style 屬性來添加內(nèi)聯(lián)樣式。然而，這不是最佳實(shí)踐，因?yàn)樗赡芎茈y閱讀代碼。這是一個(gè)關(guān)于如何在reactnative組件中使用內(nèi)聯(lián)樣式的工作示例

示例2

導(dǎo)出默認(rèn)應(yīng)用程序;

import React from 'react'; import { Button, View, Alert } from 'react-native';  const App = () =&gt; { ? ?return ( ? ? ? <view style="{{flex" :1 justifycontent: margin:> ? ? ? ? ?<button title="Click Me" color="#9C27B0" onpress="{()"> Alert.alert('Testing Button for React Native ')} ? ? ? ? ?/&gt; ? ? ? </button></view> ? ?); }