Get Started With React Native Layouts

This tutorial will guide you how to design the layout of your React Native application and implement layouts commonly used in your application, including stacking, grid layout, and absolute layout. I assume you already know the basic style of React Native apps and how to use CSS, so you won't explain too much about the FlatGrid element.

You can import it directly, and if you are using Snack, Expo will ask you if you want to install it. Otherwise, you can install it with the following command:

npm install react-native-super-grid

Import the library in your file and extract different components.

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import { FlatGrid, SectionGrid } from 'react-native-super-grid';

FlatList Used to render a partitionless list; SectionList Used to render a list with multiple subparts.

super-grid The API is based on passing data arrays and rendering methods, rather than taking everything as a JSX child element. This helps simplify the code because you don't have to write a grid, but just put the data in.

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

const styles = StyleSheet.create({
  Item: {
    color: "red"
  },
  Grid: {
    backgroundColor: "grey"
  }
});

export default function JustifyContent() {
    return (
      <flatgrid style="{styles.Grid}" itemdimension="{130}" data="{[1,2,3,4,5,6]}" renderitem="{({" item> (<text style="{styles.Item}">{item}</text>)}
      />
    );
}</flatgrid>

Summary

In this tutorial, you learned how to design the layout of React Native apps. Specifically, you learned how to use React Native's Flexbox to locate elements. You also learned how to use React Native Super Grid, which makes grid implementation easier. You can view the complete sample code and Expo Snack with all layouts.

In the next tutorial, we will put all you learned into practice by recreating common UI elements in your application: such as calendar, list, and tab navigation.

This article has been updated with contributions from Jacob Jackson. Jacob is a web developer, tech writer, freelancer and open source contributor.

The above is the detailed content of Get Started With React Native Layouts. For more information, please follow other related articles on the PHP Chinese website!