Tạo project // Di chuyển vào thư mục chứa code: cd <đường dẫn tới thư mục> //Xem thư mục chứa code dir // Tạo project mới npx react-native@latest init DemoHello Chú ý: quá trình cài đặt có thể thông báo yêu cầu cài Coca Pods, nếu bạn biên dịch chạy trên Iphone thì mới cần […]
Để thực hiện được phần này, bạn cần có API demo danh sách nhiều dữ liệu một chút. Bạn hãy xem bài viết này https://zezo.dev/view/huong-dan-phan-trang-trong-danh-sach-du-lieu-api-viet-bang-nodejs Sau khi có API demo như bài viết trên, bạn hãy vào Compass nhập khoảng 30 bản ghi và sửa biến limit trong controller thành 15 bản ghi trên 1 trang. […]
Link thư viện https://github.com/oblador/react-native-vector-icons Chạy lệnh cài đặt thư viện npm install –save react-native-vector-icons Cài đặt riêng dành cho chạy trên điện thoại android Bạn vào sửa file android/app/build.gradle (file này ở cấp độ module), chú ý không phải file ở android/build.gradle Bạn thêm phần code dưới đây vào cuối file project.ext.vectoricons = [ iconFontNames: [ ‘MaterialIcons.ttf’, […]
Mở máy ảo iPhone trên Macbook có thể được thực hiện bằng lệnh trong Terminal sử dụng ứng dụng Simctl (Simulator Control). Dưới đây là một số lệnh mẫu: Liệt kê tất cả các máy ảo iPhone có sẵn: xcrun simctl list devices Mở máy ảo iPhone cụ thể: xcrun simctl boot “tên_máy_ảo” Thay thế […]
Nối tiếp bài viết mở đầu về redux https://zezo.dev/view/lam-quen-voi-redux-trong-react-native/ Để thực hiện được các bước trong bài này, bạn cần thực hiện code ở bài trên chạy được trước. Cần cải tiến ở Reducer để thêm action xóa (deleteTodo) và cải tiến ở screen để thêm text xóa Vào file todoReducer thêm hàm xóa đặt ở sau hàm addTodo deleteTodo […]
Redux là một thư viện quản lý vùng chứa trạng thái, cho phép truy cập tương tác dễ dàng trong react. Redux tạo ra một vùng store riêng để lưu trữ dữ liệu. Khi muốn đọc ghi dữ liệu từ một component bất kỳ thì dễ dàng truy cập thông qua redux. Nếu không dùng […]
Code mẫu import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text, View } from ‘react-native’ import React, { useCallback, useState } from ‘react’ const App = () => { const [reloading, setReloading] = useState(false) // const startReload = useCallback ( ()=>{ }, []); const startReload = useCallback ( ()=>{ setReloading(true); console.log(“Bắt đầu Reload”); setTimeout(() => { […]
Code mẫu: import { Button, Modal, StyleSheet, Text, View } from ‘react-native’ import React, { useState } from ‘react’ const App = () => { const [showDialog, setshowDialog] = useState(false) return ( <View> <Text>App</Text> <Button title=’Mở dialog’ onPress={ () => setshowDialog(true) }/> <Modal visible={showDialog} > <View> <View> {/* Nội dung dialog viết ở đây */} […]
Bước 1: Tạo thư mục chứa component Trong thư mục project, tạo thư mục con là Comps, trong thư mục này tạo một file js là DemoInput.js Bước 2: Viết code cho component import { StyleSheet, Text, TextInput, View } from ‘react-native’ import React from ‘react’ const DemoInput = () => { return ( <View […]
Đối với View https://reactnative.dev/docs/view-style-props Kích thước (rộng, cao): bằng thuộc tính width, height Màu nền: Bằng thuộc tính: backgroundColor Khung viền: Dùng nhóm thuộc tính border (borderColor, borderWidth…) Bo tròn góc: borderRadius Độ dày của khung viền: borderWidth Độ trong suốt: opacity (thuộc tính này nhận giá trị từ 0->1: tỉ lệ % trong suốt […]