Thành's Blog

Long time no see

March 22, 2019 • 2 mins

Lâu lắm rồi mới ngồi code tí React Native. Cứ ngồi lăn tăn nghĩ không biết bao giờ mới có dự án mới để làm React Native từ A-Z. Giờ có rồi thì ...

Navigation

Cảm giác đau thương của hồi dùng v1 và js base navigation package vẫn ngấp nghé đâu đó quanh ass mỗi lần có ý định dùng. Nhưng kì thực cho đến lúc này, chưa có vấn đề gì phức tạp lắm với react-navigation v3. Khó khăn nhất chắc là thiết kế quả stack nào nằm trên stack nào thôi! Chốt lại là như này:

Navigator Diagram

Đây là vừa support Drawer, vừa support Modal stack. Nhưng cuối cùng, mình lại không dùng Modal stack nữa mà dùng một ModalContext.

const initialValues = {
  showModal: false,
  openModal: () => {},
  closeModal: () => {},
}

export const ModalContext = React.createContext(initialValues)

export const ModalProvider = ({ children }) => {
  const [showModal, setShowModal] = React.useState(false)
  const [modalComponent, setModal] = React.useState(null)
  const openModal = (modal) => {
    setShowModal(true)
    setModal(modal)
  }
  const closeModal = () => setShowModal(false)

  return (
    <ModalContext.Provider value={{ openModal, closeModal, showModal }}>
      {children}
      {showModal && (
        <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
          {modalComponent}
        </View>
      )}
    </ModalContext.Provider>
  )
}

Không hiểu sao mình lại dùng như vậy. Thôi! Code đang chạy, refactor sau đi.

Về phần navigation, mình có dùng qua mấy cái package khác nhau. Thì:

Nếu App nhỏ xinh, react-navigation v3 rất ổn :D Support hết guesture, animation. Nghe nói sắp có cả big title cho iOS

Nếu App phức tạp, wix/react-native-navigation chắc vẫn là lựa chọn số 1

react-router-native? Thôi nghỉ đi!

ScrollView's 2016 bug

Code xanh sạch đẹp rồi, quất cái app lên device chạy thử thì tá hỏa, tự dưng content bị mất 1 đoạn ở đít. Thấy có gì đó sai sai rồi. Lại mất nguyên một buổi chiều để tìm cách fix nó. Ai đời, cả cái list thiếu ngay cái item cuối cùng. Rồi! Nó là bug của ScrollView. Và nó vẫn Open từ 2016 đến giờ. Đệch! Lục tung cả cái github lên và cuối cùng thì flex: 1 là thứ đã cứu vãn lại cuộc đời dev gian nan của mình.

<SafeViewArea style={{ flex: 1 }}>
  <Header />
  <View style={{ flex: 1 }}> // Magic!
    <ScrollView style={{ flex: 1 }}> // Other magic!
      ... alot of item in here ...
    </ScrollView>
  </View>
  <Footer />
</SafeViewArea>

Túm váy lại, nếu mà <ScrollView /> nested trong một <View /> thì cả bố con chúng nó phải có flex: 1. Không thì, anh <ScrollView /> bất mãn cắt ngay mấy thằng con cuối cùng đi. Dị!

2018 © Thành
RSS