Bermula dengan susun atur asli React

Tutorial ini akan membimbing anda bagaimana untuk merekabentuk susun atur aplikasi Native React anda dan melaksanakan susun atur yang biasa digunakan dalam aplikasi anda, termasuk susun atur, susun atur grid, dan susun atur mutlak. Saya menganggap anda sudah mengetahui gaya asas aplikasi asli dan cara menggunakan CSS, jadi anda tidak akan menjelaskan terlalu banyak mengenai elemen flatgrid.

anda boleh mengimportnya secara langsung, dan jika anda menggunakan makanan ringan, Expo akan bertanya kepada anda jika anda mahu memasangnya. Jika tidak, anda boleh memasangnya dengan arahan berikut:

npm install react-native-super-grid

Import perpustakaan dalam fail anda dan ekstrak komponen yang berbeza.

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

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

digunakan untuk membuat senarai partition; FlatList API SectionList

berdasarkan array data lulus dan kaedah rendering, dan bukannya mengambil segala -galanya sebagai elemen kanak -kanak JSX. Ini membantu memudahkan kod kerana anda tidak perlu menulis grid, tetapi hanya masukkan data.

super-grid

Ringkasan

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>

Dalam tutorial ini, anda belajar bagaimana merancang susun atur aplikasi asli React. Khususnya, anda belajar bagaimana menggunakan Flexbox React Native untuk mencari unsur -unsur. Anda juga belajar bagaimana menggunakan React Native Super Grid, yang menjadikan pelaksanaan grid lebih mudah. Anda boleh melihat kod sampel lengkap dan snek ekspo dengan semua susun atur.

Dalam tutorial seterusnya, kami akan meletakkan semua yang anda pelajari dengan amalan dengan mencipta unsur UI yang biasa dalam permohonan anda: seperti kalendar, senarai, dan navigasi tab.

Artikel ini telah dikemas kini dengan sumbangan dari Jacob Jackson. Jacob adalah pemaju web, penulis teknologi, freelancer dan penyumbang sumber terbuka.

Atas ialah kandungan terperinci Bermula dengan susun atur asli React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!