如何使用reactnative為您的應用程式添加樣式或CSS？-js教程-PHP中文網

如何使用reactnative為您的應用程式添加樣式或CSS？

PHPz

發布： 2023-09-01 12:05:03

轉載

1176 人瀏覽過

可以如下設定應用程式的樣式-

使用樣式表元件
#使用內聯樣式

使用樣式表元件

當您想要將樣式套用到應用程式時，React 原生樣式表元件非常方便且簡潔。要使用樣式表元件，首先將其導入，如下所示-

import { StyleSheet } from &#39;react-native&#39;;

登入後複製

您可以使用樣式表元件建立樣式，如下所示-

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>

登入後複製

這裡有一個使用樣式表來顯示FlatList 元件的範例-

範例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 (
         <View style={styles.item}>
            <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >
               {item.name}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <FlatList
               data={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={item => item.name}
               stickyHeaderIndices={this.state.stickyHeaderIndices}
            />
         </View>
      );
   }
}
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 &#39;react&#39;;
import { Button, View, Alert } from &#39;react-native&#39;;

const App = () => {
   return (
      <View style={{flex :1, justifyContent: &#39;center&#39;, margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={() => Alert.alert(&#39;Testing Button for React Native &#39;)}
         />
      </View>
   );
}

登入後複製