- vừa được xem lúc

Cách setup nhiều firebase google-service trên IOS khi dùng react-native-config

0 0 21

Người đăng: Hoang Long

Theo Viblo Asia

Anh em có thể ủng hộ mình 1 view ở đây: https://vir.vn/cach-setup-nhieu/

Vấn đề

Nếu anh em dùng react-native-config, thì thường mọi người sẽ chia làm 3 env chính:

  • dev
  • stag
  • prod

Nếu sử dụng 3 env trên, thì thường trên firebase mọi người sẽ phải tạo ra 3 app tương ứng với env trên.

Và anh em ai dùng firebase đều biết nó sẽ có 1 file config gọi là google-service. Và vấn đề là nếu như bên Android, thì kể cả bạn có 3 app thì cũng chỉ cần sử dụng duy nhất 1 file google-service.json.

Nhưng IOS thì said tao đ*o thích làm thế, và thế là chúng ta có 3 file GoogleService-Info.plist tương ứng với 3 app (dev, stag và prod)

Cách giải quyết

Thường là anh em nếu làm theo hướng dẫn của react-native-config, thì họ sẽ hướng dẫn anh em tạo ra 3 schema tương ứng với số env. Và tất cả đều chung 1 target. Đến đây chắc một số anh em nghĩ là:

"Thế thì thêm 2 cái target nữa là xong nhỉ"

Ờ thì... cũng đúng, chỉ cần thêm 2 cái target nữa rồi cho nó sử dụng cái GoogleService-Info.plist tương ứng là xong, nhưng như thế thì mình đã có 3 cái schema rồi giờ lại còn đẻ thêm 3 cái target nữa thì quả thật là nó có hơi...

Vậy thì mình xin phép giới thiệu 1 cách mình cho là đơn giản hơn, đó là chỉ cần tạo 1 Phase mới trong Build Phases , phase này chịu trách nhiệm lấy file config tương ứng và sử dụng , thế là xong.

  • Đầu tiên, mình có 1 con app tên là MyApp với bundle_identifier là com.myapp , com.myapp.dev , com.myapp.staging

  • Sau đó, lấy 3 file GoogleServices-Info.plist để vào 1 folder Config nằm trong folder ios, đổi tên 3 file này thành GoogleServices-Info-{bundle_identifier}.plist

  • Tiếp theo, mở Xcode, chọn target và vào tab Build Phases, tạo 1 phase mới, đặt tên là Copy Google-Service chẳng hạn

  • Sau đó, vào phase này, thêm vào đoạn bash script sau:
PATH_TO_CONFIG=$SRCROOT/Config/GoogleService-Info-$PRODUCT_BUNDLE_IDENTIFIER.plist
FILENAME_IN_BUNDLE=GoogleService-Info.plist
BUILD_APP_DIR=${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app
echo cp $PATH_TO_CONFIG "$BUILD_APP_DIR/$FILENAME_IN_BUNDLE"
cp $PATH_TO_CONFIG "$BUILD_APP_DIR/$FILENAME_IN_BUNDLE"

Và thế là xong, nhìn đoạn script trên thì chắc mọi người cũng thấy được nó hoạt động thế nào, chỉ là lấy ra file GoogleServices có cái bundle_indentifier tương ứng rồi thay vào lúc build. Bao đơn giản phải không?

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học React Native từ cơ bản đến nâng cao - Phần 1 Hướng dẫn cài đặt và chạy "Hello world" (tài liệu viết từ 2018 nên giờ không còn phù hợp với version mới của react native hiện nay )

Trong bài viết này tôi sẽ hướng dẫn cài đặt React Native trên môi trường Windows (khá phổ biến ở Việt Nam). Cài đặt môi trường. Bạn cần phải có :. .

0 0 43

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 6

Chào các bạn một năm mới an khang thịnh vượng, dồi dào sức khỏe. Lại là mình đây Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.

0 0 68

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 371

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 5

Chào mọi người, lại là mình đây Sau 1 thời gian vừa viết bài hướng dẫn, vừa viết code thì mình đã đưa được cái app cơ bản của mình lên google play. Đây là link: https://play.google.com/store/apps/details?id=com.

0 0 119

- vừa được xem lúc

Responsive và Adaptive UI trong React Native

Một số mẹo chung. . Luôn set min width và max width. Điều này giúp cover tốt được các màn hình cỡ XS hoặc XL.

0 0 68

- vừa được xem lúc

Những điều cần lưu ý và sử dụng Hook trong React (Phần 2)

II. UseEffect và điều cần lưu ý . Có hai loại xử lý phổ biến trong các thành phần React: những xử lý phụ không yêu cầu cleanup và những xử lý phụ có cleanup. Hãy xem xét sự khác biệt này chi tiết hơn.

0 0 129