반응형 네이티브를 사용하여 앱에 스타일이나 CSS를 추가하는 방법은 무엇입니까?

애플리케이션은 다음과 같이 스타일을 지정할 수 있습니다. -

• 스타일시트 구성요소 사용
• 인라인 스타일 사용

스타일시트 구성요소 사용

애플리케이션에 스타일을 적용하려는 경우 기본 스타일시트 구성요소에 반응 매우 편리하고 간단합니다. 스타일시트 컴포넌트를 사용하려면 먼저 아래와 같이 가져옵니다. -

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,
   }
});

위 스타일을 아래와 같이 코드에 사용할 수 있습니다. -

<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,
   }
});

Output

인라인 스타일 사용

style 속성을 사용하여 인라인 스타일을 추가할 수 있습니다. 그러나 이는 코드를 읽기 어려울 수 있으므로 모범 사례는 아닙니다. 다음은 반응형 구성 요소에서 인라인 스타일을 사용하는 방법에 대한 실제 예제입니다.

예제 2

기본 애플리케이션 내보내기;

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

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>
   );
}

Output

위 내용은 반응형 네이티브를 사용하여 앱에 스타일이나 CSS를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!