Tạo ứng dụng React-Native
TIL
720
White

Nghiêm Tiến Viễn viết ngày 13/02/2019

Sau 1 thời gian làm React-JS cho website gostream.co thì nhu cầu tất yếu tiếp theo là làm app. Mặc dù GoStream đã có app cả ios và android nhưng app này trước nhờ mấy ông bạn code cho, giờ nhờ sửa nhiều chỗ thì ngại, cuối cùng là quyết định tự code lại bằng React luôn cho khỏe.

Bài này mình ghi lại những bước cơ bản đầu tiên để tạo 1 ứng dụng React Native, bao gồm những chức năng cơ bản là :

Mình sẽ bỏ qua các bước râu ria như cài đặt môi trường nodejs, Xcode, Android Studio... Bắt đầu thôi

1. Khởi tạo

npm install -g react-native-cli
react-native init ReactApp
cd ReactApp
npm install
cd ios
pod init
nano Podfile

Xóa những dòng sau

target 'ReactApp-tvOSTests' do
inherit! :search_paths
# Pods for testing
end

cd ../android
nano local.properties
Cấu hình đường dẫn tới android sdk sdk.dir = /Users/<username>/Library/Android/sdk
cd ..

Để chạy project trên ios :
react-native run-ios

Chạy trên android:
react-native run-android

Nếu gặp lỗi :
Unable to strip library '/.../.../libicu_common.so' due to missing strip tool for ABI 'ARMEABI'. Packaging it as is.

Sửa như sau:
mkdir ~/Library/Android/sdk/ndk-bundle/toolchains/mips64el-linux-android-4.9/prebuilt/darwin-x86_64/bin
touch ~/Library/Android/sdk/ndk-bundle/toolchains/mips64el-linux-android-4.9/prebuilt/darwin-x86_64/bin/mips64el-linux-android-strip

Lỗi unable to load script from assets index.android.bundle
https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

Các bạn xem thêm ở đây : https://facebook.github.io/react-native/docs/getting-started.html

2. Cài đặt Native Base

npm install native-base --save
react-native link

Cách sử dụng và các component hỗ trợ các bạn xem ở đây https://docs.nativebase.io/docs/GetStarted.html

3. Cài đặt Facebook SDK

npm install react-native-fbsdk
react-native link
cd ios
nano Podfile
thêm những dòng sau vào Podfile , ngay sau dòng target 'ReactApp' do
pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'

Thoát nano bằng Ctrl+X, y, Enter

pod install
cd ..

Cài đặt app Facebook và cấu hình app ios theo các bước ở đây https://developers.facebook.com/docs/ios/getting-started/

4. Cấu hình In app purchase

npm install --save react-native-iap
react-native link

Follow this https://medium.com/@dooboolab/react-native-in-app-purchase-121622d26b67

5. Cài đặt Firebase

npm install react-native-firebase --save
react-native link

cd ios
nano Podfile
thêm những dòng sau vào Podfile , ngay sau dòng target 'ReactApp' do
pod 'Firebase/Core'
Thoát nano

pod install
cd ..

Cài đặt livestream

npm i react-native-nodemediaclient --save
react-native link
cd ios

add to Podfile
pod 'NodeMediaClient'
pod install
cd ..

Cấu hình AppDelegate.m xem thêm ở đây https://github.com/evollu/react-native-firebase-analytics

NghiemTienVien 26-11-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nghiêm Tiến Viễn

3 bài viết.
8 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 3
Livestream đã và đang là chuyện hằng ngày hằng giờ trên các mạng xã hội. Những bài viết livestream được ưu tiên hiển thị nhiều hơn so với những bài...
Nghiêm Tiến Viễn viết hơn 2 năm trước
7 3
White
7 3
Đây là kinh nghiệm của mình gần đây, khi server bị hack và mình vất vả chống đỡ. Bài ghi lại cách cấu hình server CentOS cho bảo mật hơn. Cấu hìn...
Nghiêm Tiến Viễn viết hơn 1 năm trước
7 3
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
8 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!