How to add styles or CSS to your app using reactnative?-JS Tutorial-php.cn

How to add styles or CSS to your app using reactnative?

PHPz

Release： 2023-09-01 12:05:03

forward

1176 people have browsed it

You can style your application as follows -

Using stylesheet components
Using inline styles

Using stylesheet components

React native stylesheet components are very convenient and concise when you want to apply styles to your application. To use the stylesheet component, first import it as shown below -

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

Copy after login

You can create styles using the stylesheet component as shown below -

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

Copy after login

The above styles can be used in your code Used in the following -

<View style={styles.container}></View>

Copy after login

Here is an example of using a style sheet to display the FlatList component-

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

Copy after login

Output

How to add styles or CSS to your app using reactnative?

Using inline styles

You can use the style attribute to add inline styles. However, this is not a best practice as it can be difficult to read the code. This is a working example on how to use inline styles in reactnative components

Example 2

Export default application;

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

Copy after login

Output

How to add styles or CSS to your app using reactnative?

The above is the detailed content of How to add styles or CSS to your app using reactnative?. For more information, please follow other related articles on the PHP Chinese website!