Phản ứng css bản địa
|
Show
Điền email để nhận ASO Checklist ( + kèm theo bản chiến lược ASO chi tiết)
NHẬN KIỂM TRA >> is doneCảm ơn bạn đã đăng ký. Kiểm tra hộp thư để nhận liên kết tải xuống sách Ngoài ra, trên VNTALKING còn chia sẻ rất nhiều từ khóa học, tài liệu bổ sung cho độc giả. Bạn có thể ghé qua xem có tài liệu phù hợp với mình không nhé Xem quà tặng khác nhau is doneCảm ơn bạn đã đăng ký. Kiểm tra hộp thư để nhận liên kết tải xuống sách Ngoài ra, trên VNTALKING còn chia sẻ rất nhiều từ khóa học, tài liệu bổ sung cho độc giả. Bạn có thể ghé qua xem có tài liệu phù hợp với mình không nhé Xem quà tặng khác nhau is doneCám ơn đã đăng ký. Bạn kiểm tra hộp thư để nhận link tải sách Ngoài ra, VNTALKING vừa hoàn thành cuốn sách học lập trình Node. js thật đơn giản (tiếng việt). Mình tin bạn sẽ thích nó? Reported book Đăng ký để nhận sách miễn phí Kiểm tra inbox để nhận link tải sách nhé Reported book Xin chào các bạn đã đến với hướng dẫn học React-Native cho người mới bắt đầu. Sau đây là một số chia sẻ, hướng dẫn của mình cho người mới bắt đầu tìm hiểu về React-Native. Qua đó Giúp các bạn có cách nhìn tổng thể hơn và dễ dàng tìm hiểu vấn đề khi mới chập chững bước chân vào lập trình với React-Native p/s. Bài viết chủ yếu dựa trên tài liệu chính hệ thống của React-Native phiên bản 0. 56 tại https. //Facebook. github. io/react-native/docs/getting-started kết hợp với sự hiểu biết cá nhân của mình vì vậy nếu có sai sót, anh em cứ góp ý để mình sửa đổi nhé Mục Lụctôi. Mục tiêu hướng dẫn
Khuyến nghị. Sau những lần tìm hiểu và phát triển ứng dụng thì mình khuyến cáo không nên sử dụng Expo (framework of react) để phát triển ứng dụng đơn giản. Bởi vì dự án của bạn sẽ trở nên nghiêm trọng, bạn rất khó quản lý giấy phép và các thư viện đi kèm III. NỘI DUNG Vệ DẪN1. Hướng dẫn cài đặt môi trường phản ứng gốc trên hệ điều hành Windows
Lưu ý. Trên hệ điều hành windows chỉ có thể xây dựng ứng dụng trên Android 2. Hướng dẫn cài đặt môi trường phản ứng gốc trên hệ điều hành MAC OS
3. Các IDE được khuyến khích sử dụng
P/s. Nếu dùng MAC thì nên dùng Xcode để chạy ứng dụng. Bởi vì một số lý do như. Chạy các lần sau nhanh hơn, xem log debug mà không cần bật chức năng Debug JS Remotely và quan trọng là làm quen với một số chức năng của Xcode để khi xảy ra lỗi sửa lỗi nhanh hơn. 4. Khởi tạo dự án đầu tiên
Khi chạy lệnh này, hệ điều hành sẽ tạo một máy chủ cục bộ để xây dựng mã phản ứng của bạn. Add to that is run the command to build application.
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }3
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }4 Chú thích phiên bản glog (0. 3. 5) mà bạn đang sử dụng 5. Các thành phần cơ bản của dự ánCấu hình thư mục cấu trúc mà bạn nhìn thấy có thể sẽ như dưới đây (tùy chọn phiên bản react-native hiện tại của bạn). Hình bên dưới không bao gồm một vài tệp bị ẩn cấu hình thuộc tính của phản ứng gốc
6. Thành phần trong React-NativeThành phần là một thành phần cơ bản trong ứng dụng phản ứng gốc. Mọi chế độ xem, màn hình đều được kế thừa từ lớp thành phần này 6. 1. Vòng đời của component( Nguồn. Internet) Các hàm được gọi trong vòng đời của Component
6. 2. Các thành phần cơ bản của thành phầnSau đây là chương trình mẫu cơ bản để hiểu được các thành phần của một Thành phần import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }1
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } } 6. 3. Một số hàm đặc biệt
this.setState({ message: "Chào mừng", key: "Value", }) console.log(this.state.message) //không nên // không sử dụng this.state ngay sau khi vừa set xong // biến truyền vào cho hàm setState là một đối tượng có dạng key: value. Có thể sử dụng gọi lại để kiểm tra dữ liệu hoặc xử lý một số tác vụ sau khi thay đổi trạng thái import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }9
6. 4. Một vài lưu ý nhỏ khi sử dụng React-Native
7. Design Design View (Kiểu)Sau đây là đoạn mã Demo về Style của ứng dụng React-Native. Mã có sẵn trong Ví dụ (Example/app/modules/screens/Home/StyleDemo) import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }6 Giống như một ứng dụng web cơ bản, React-Native sử dụng một số thẻ css để vẽ những gì bạn muốn. Nếu bạn đang lập trình web quen thuộc với css thì việc thiết kế này khá đơn giản. Để trau dồi những khả năng này chỉ có cách là làm cho nhiều bạn sẽ khám phá ra những phong cách bạn muốn và sẽ làm cho ứng dụng của bạn đẹp hơn At ví dụ về bạn có thể thay đổi các thuộc tính của kiểu rồi tải lại để thấy sự thay đổi nhé Trong ví dụ thư mục Trang chủ, tôi đã chia Phần kiểu qua một tệp khác để dễ quản lý (Từ các ví dụ sau trở đi, tôi sẽ chia phần kiểu này sang một tệp khác để dễ quản lý). Bạn có thể vào đó, thử thay đổi, xóa sửa đổi để biết được thuộc tính nào dùng để làm gì nhé. Làm nhiều phần này thì sẽ có kinh nghiệm thiết kế đẹp thôi Một vài lưu ý
8. Kỹ thuật Gỡ lỗi cơ bảnXây dựng ứng dụng React-Native khác với ứng dụng gốc là bạn không thể đặt điểm dừng rồi chạy và chờ chương trình nhảy vào vị trí mà bạn mong đợi và xem trạng thái hay biến lúc đó bằng bao nhiêu đang diễn ra . Thay vào đó, chương trình React-Native cho phép bạn nhập giá trị tại thời điểm đó và xuất ra màn hình bảng điều khiển. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }93 để đánh giá giá trị của biến bất kỳ (xem ví dụ hướng về để biết giá trị của thông báo biến trong trạng thái) Xcode và Android studio mặc định khi chạy gỡ lỗi sẽ xuất các nhật ký này ra trong phần Tất cả đầu ra (Xcode), Logcat (Android Studio) Bên cạnh đó, bạn có thể sử dụng chức năng gỡ lỗi JS từ xa (xem phần hiển thị trình đơn điều khiển trong mục 4) để xem nhật ký này trong phần bảng điều khiển của trình duyệt web Ngoài ra, bạn có thể sử dụng thiết bị đầu cuối (cmd) để xem nhật ký IOS hoặc Android bằng cách nhập lệnh import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }8 9. Các Component thường sử dụngDưới đây là code demo những thành phần cơ bản thường dùng. Bạn có thể mã lại, sao chép hoặc chạy bản demo từ ví dụ (bản demo có sử dụng hình ảnh nên bạn phải sao chép hình ảnh trong ví dụ - Ví dụ/ứng dụng/tài sản/hình ảnh) import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }9 Sau khi chạy Demo ta được UI như sau (chạy ví dụ thì click vào component) 9. 1. Lượt xemLà một thành phần cũng thường xuyên được sử dụng. Thường được sử dụng với mục đích chia các chế độ xem theo hàng dọc hoặc hàng ngang dựa trên thuộc tính flexDirection trong kiểu là 'cột/hàng' (dọc / ngang), hoặc sử dụng để chứa nhiều chế độ xem con hoặc khi cần thiết trong màn hình import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }0 uốn cong. 1 ở kiểu sẽ giúp kéo xem có thể mở rộng hết các khung chứa 9. 2. ChữUse to display 1 message up screen. Có thể sử dụng văn bản cố định hoặc trong nội dung của một biến trên màn hình import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }40 9. 3. Hình ảnhUse to display image up screen. Có 3 cách hiển thị
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }41
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }42
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }43 Resize Mode quen thuộc
9. 4. Cái nútCách sử dụng một nút import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }44 Thông thường mình ít khi sử dụng Nút vì lý do tùy chỉnh kiểu nó không hoạt động đúng với cả Android và IOS vì vậy nên mình thường sử dụng TouchableOpacity hơn. Nhưng lưu ý cách sử dụng sự kiện onPress import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }94 Vui lòng viết theo cấu trúc này để giảm thiểu sai sót hoặc phải ràng buộc hàm trong contrucstor trước khi sử dụng. Sự kiện onPress chỉ có một số thành phần được hỗ trợ, Text thì không hỗ trợ nên nếu muốn sử dụng onPress cho Text thì đọc phần TouchableOpacity phía bên dưới nhé 9. 5. TouchableOpacityThông thường mình thay thế việc sử dụng Button bằng TouchableOpacity để định dạng style giống nhau cho cả android và ios, TouchableOpacity có thể chứa bất kỳ chế độ xem con nào và nhớ lưu ý cách sử dụng sự kiện trên Press like Button nhé. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }45 9. 6. danh sách phẳngĐây là Thành phần thường được sử dụng để hiển thị 1 danh sách trên màn hình. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }46 Một vài lưu ý khi sử dụng Flatlist
Các thành phần trên mình chỉ mang tính chất giới thiệu để các bạn tìm hiểu. Để hiểu rõ hơn cũng như tìm hiểu thêm về các thuộc tính của từng thành phần thì vui lòng đọc tài liệu riêng của các thành phần nhé. Mỗi thành phần sẽ có nhiều thuộc tính khác nhau để hỗ trợ bạn làm giao diện người dùng tốt và mượt nhất có thể 10. Prop và cách truyền dữ liệu giữa các View (Screen)Tạo ứng dụng tệp. js as after import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }47 và 1 tệp ViewItem. js nằm cùng thư mục import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }48 Trong Ví dụ mình đã phong cách lại và đưa nó ra 1 tệp riêng là phong cách. js để dễ quản lý (bản demo trên có sử dụng hình ảnh nên bạn phải sao chép hình ảnh trong ví dụ - Ví dụ/ứng dụng/nội dung/hình ảnh) At the ví dụ trên ta demo việc truyền dữ liệu giữa 2 component information through props Bên gửi qua (ViewItem close vai trò là 1 thành phần được tùy biến) import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }49 Bên nhận dữ liệu có thể sử dụng dữ liệu được truyền thông qua đạo cụ. (Kiểu nó ném mấy cái dữ liệu qua thì bên nhận này truy xuất thông tin qua props) import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }10 Việc truyền ngược dữ liệu cũng có thể được thực hiện trong ví dụ thông qua việc xử lý sự kiện onPressItem() import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }11 Một vài lưu ý khi sử dụng props
11. Cài đặt và sử dụng thư viện11. 1. Cài đặt thư việnThông thường trong React-Native sử dụng thư viện rất nhiều có thể vì một vài lý do
Khi bạn gặp vấn đề hoặc cần phải làm một cái gì đó với react-native, hãy tìm Google với từ khóa react-native + cái gì bạn muốn làm. Ví dụ muốn làm chức năng đăng nhập với facebook thì có thể tìm được. phản ứng gốc đăng nhập với facebook. Đa phần bạn sẽ thấy thư viện hỗ trợ nằm ngay trên trang đầu tiên. Vui lòng vào trang chính của thư viện để xem cách cài đặt và sử dụng thư viện. Nhớ xem lại số sao và các vấn đề trước khi bạn muốn sử dụng thư viện nào trên github. Nếu thư viện được xuất bản trên npmjs https. //www. npmjs. com/ thì bạn có thể cài đặt thông qua import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }96 11. 2. Liên kết thư việnMột phần khá quan trọng, sau khi bạn kéo thư viện từ npm về, thì bạn cần liên kết thư viện đó vào ứng dụng của mình để ứng dụng có thể khởi động các phần mã gốc của thư viện hoặc được cấp quyền chạy một số tác vụ khác. Thông thường các thư viện đều có liên kết tự động thông qua lệnh import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }97. Tùy vào từng thư viện sẽ có hướng dẫn và cách bổ sung liên kết. Bên cạnh đó một số thư viện không liên kết tự động hoặc dự án của bạn có vấn đề phải liên kết bằng tay lúc đó bạn nên tham khảo bài viết này trước để biết cách liên kết và hiểu sâu hơn https. //Facebook. github. io/Reac-native/docs/liên kết-thư viện-ios 11. 3. Edit thư việnPhần trình quản lý mã nguồn (git/svn) sẽ không cam kết các thư viện có sẵn được cài đặt từ npm (thư mục node_modules) hoặc nếu mình cố gắng cam kết sẽ làm dự án của chúng ta nặng lên rất nhiều lần. Do vậy chúng ta không chỉnh sửa trực tiếp thư viện trong node_modules. Sau khi cài đặt và liên kết thư viện. You copy nguyên mã nguồn thư viện thông qua ứng dụng/mô-đun và tiến trình sửa đổi, biến thư viện tùy biến tại đây. Lúc nào sử dụng bộ nhớ chuyển đổi đường dẫn nhập thư viện thông qua dự án của bạn. Nếu đó là phần chỉnh sửa quan trọng trong hy vọng bạn sẽ đóng góp cho cộng đồng bằng cách báo cáo dự án chính hoặc chia sẻ lại cho mọi người 12. Chuyển đổi giữa các màn hìnhMột ứng dụng bạn phát triển không thể chỉ có một màn hình. Vì vậy bạn phải biết cách chuyển đổi qua lại giữa các màn hình. Hiện tại mình sử dụng thư viện react-navigation (v. 2. 18. 1) để chuyển đổi giữa các màn hình. Các bạn có thể tìm hiểu thêm về thư viện này tại (https. // điều hướng phản ứng. tổ chức)
- Xây dựng cấu trúc ứng dụng. Để bạn hiểu rõ hơn về phần demo sau vui lòng xem lại chỉ mục tệp. js trong Ví dụ (Ví dụ/ứng dụng/chỉ mục. js). Dưới đây là phần tạo cấu trúc sườn của ứng dụng dựa trên StackNavigator của thư viện phản ứng điều hướng import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }12 Như bạn đã thấy ở trên ta khai báo 1 ứng dụng có 4 màn hình HOME, PHONG CÁCH, THÀNH PHẦN, PROPS. Mặc định màn hình nào ở trên cùng sẽ được xuất hiện đầu tiên. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }13 Trong đó Màn hình. Trang chủ là lớp được nhập từ màn hình mô-đun. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }99 Dòng lệnh này thực hiện nhập toàn bộ các lớp được xuất ra thông qua chỉ mục tệp. js. Vì vậy nếu bạn thêm màn hình mới lưu ý vào chỉ mục tệp. js to export more class you have to create - Move to screen. có 2 cách chuyển màn hình
13. Giao tiếp Client vs Server13. 1. API RESTfulNếu bạn chưa biết RESTful API là gì thì có thể đọc thêm bài viết này (https. //viblo. asia/p/thiet-ke-restful-api-GrLZD98Vlk0) để hiểu rõ hơn về RESTful API. Đây là một trong những biến chuẩn giao tiếp phổ biến giữa máy khách và máy chủ Phần Demo này được trình bày khá rõ ràng và chi tiết trong ví dụ Ví dụ (app/modules/screens/RestFul/RestFul. js). Bạn nên chạy ví dụ trước để thấy cách hoạt động của nó. Demo bao gồm việc gọi api công khai từ https. //api. băng5. skyx. app/get_languages (GET) and display results as after
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }17 Ở đây mình định nghĩa 1 lớp để quản lý việc trao đổi, giao tiếp giữa client và server. Hàm fetchData() là một hàm bất đồng bộ hỗ trợ gọi các phương thức RESTful Và đây là cách chúng ta gọi hàm fetchData() và xác định rõ ràng 1 api truy cập để lấy danh sách ngôn ngữ. Lưu ý. Thay vì việc mình đặt trực tiếp link https. //api. băng5. skyx. app/get_languages thì mình gọi lại hàm getBaseURL() là để sau này có api thay, thì mình không phải đi thay nhiều chỗ, chỉ cần vào config và thay đổi là xong import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }18 Ví dụ fetchData() với phương thức POST import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }19
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }0 Lưu ý. Phương thức getLanguagesFromServer() nên gọi trong componentDidMount() hoặc các sự kiện sau khi constructor() hoàn tất để giải quyết những lỗi có nguy cơ ẩn ẩn ví dụ như api nhanh quá, contrucstor chạy chưa xong và nó đi setState() thì ứng dụng 13. 2. ổ cắm webSắp có 14. Lưu trữ dữ liệuReact-Native default. Xem phần Lưu trữ bên dưới để tìm hiểu thêm về phương pháp lưu trữ này. Bên cạnh đó mình xin được giới thiệu phương pháp lưu trữ theo dạng dữ liệu có cấu trúc sử dụng cơ sở dữ liệu cảnh giới. Theo bản thân mình vương quốc được đánh giá là một trong những thư viện hỗ trợ cơ sở dữ liệu tốt và tối ưu cho dân lập trình trên các dòng di động hiện tại 14. 1. Bộ nhớ không đồng bộBởi vì AsyncStorage chạy bất đồng bộ vì vậy mình chỉ sử dụng AsyncStorage để lưu một số cấu hình của ứng dụng ví dụ như dữ liệu người dùng hoặc mã ngôn ngữ. , những dữ liệu quan trọng và có cấu trúc thông thường của mình sẽ sử dụng cơ sở dữ liệu để lưu trữ, truy xuất nhanh và dễ dàng hơn nhập thư viện AsyncStorage import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }1 Sử dụng thư viện import React, { Component } from 'react'; import { Text, View } from 'react-native'; class CustomText extends Component { constructor(props) { super(props); } render() { return ( <Text>{this.props.message}</Text> /*Sử dụng props được truyền từ ngoài vào.*/ ); } } export default class App extends Component { constructor(props) { super(props); this.state = { message: "Welcome to Code 101 - React-native" } } render() { return ( <CustomText message={this.state.message} /> /*truyền 1 props vào cho thằng con sử dụng.*/ ); } }2 14. 2. cơ sở dữ liệuThông thường mình sẽ sử dụng vương quốc để lưu trữ các dữ liệu có cấu trúc. Mình xin demo nhỏ về một phần mềm quản lý, chỉnh sửa danh sách sinh viên 15. Đa ngôn ngữ16. Giao tiếp với bản địa17. Quy định tên biến và cấu trúc chương trìnhKhi bạn thấy khá là khác các vấn đề về React-Native và code được một vài chương trình đơn giản thì cũng là lúc chúng ta nên xem lại các quy chuẩn thiết kế, cũng như quy chuẩn về tên biến để
Mình xin dưa ra một số quy định cơ bản như sau 17. 1. variable name and function
17. 2. Constructor programSau những dự án và tìm hiểu trên mạng. Mình đã đưa ra cấu hình cấu trúc thư mục dự án như sau (hình ảnh/cấu trúc dự án. jpg) Toàn bộ mã nguồn của chương trình sẽ được đặt trong thư mục ứng dụng
|
