How to add side menu wix-react-native-navigation

Bài viết này mình sẽ không đề cập tới việc cấu hình và sử dụng wix/react-native-navigation nữa, phần này coi như các bạn đã biết hoặc tham khảo thêm trên offical documents. Mặc định thì Wix react native navigation cũng đã cung cấp cho chúng ta giải pháp về side menu, thật chất thì vẫn còn giới hạn và vẫn còn lỗi :). Bài viết này mình sẽ đi qua về side menu của Wix và một thư viện bên ngoài là React Native Navigation Drawer Extension. Let’s get started

Built-in Side menu của Wix react-native-navigation

Để sử dụng được built-in side menu của wix, mình có 3 thao tác sau:

• Đăng ký component nào sẽ đóng vai trò side menu với hàm registerComponent của wix/react-native-navigation
• Cấu hình side menu ở vị trí left, right
• Thực hiện mã cho phép hiện thị side menu

Đăng ký Component đóng vai trò là side menu

Giả sử mình có 1 component có tên là LeftSideMenu với mã trong file LeftSideMenu.js

import React from 'react';
import { SafeAreaView, StyleSheet, View, Text } from 'react-native';

class LeftSideMenuScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View>
          <Text>Left side menu content</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    borderWidth: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center'
  }
})

export default LeftSideMenuScreen;

Sau khi tạo component trên, tiếp theo mình đăng ký với registerComponent

Navigation.registerComponent(
  'LeftSideMenu',
  () => LeftSideMenuScreen,
);

Cấu hình side menu hiện thị ở vị trí left, right của ứng dụng

Ở bước này, mình cấu hình bên trong hàm Navigation.setRoot, theo dõi đoạn mã bên dưới

Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            id:'leftSideMenu',
                            name: 'LeftSideMenu'
                        },
                    },
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    titleDisplayMode: 'alwaysShow',
                                },
                            },
                            children: [{
                                stack: {
                                    children: [{
                                        component: {
                                            name: HOME,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'Convert & download youtube to mp4',
                                                    },
                                                },
                                            },
                                        }
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'Youtube2mp3',
                                            icon: homeIcon,
                                        },
                                    },
                                },
                            }, {
                                stack: {
                                    children: [{
                                        component: {
                                            name: ABOUT,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'About',
                                                    },
                                                },
                                            },
                                        },
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'About me',
                                            icon: infoIcon,
                                        },
                                    },
                                },
                            }],
                        },
                    }
                },

            },
        });

Lúc này, root sẽ chứa sideMenu, và bottomTabs của chúng ta sẽ dời vào thuộc tính center của side menu, các bạn theo dõi các cấp để thiết lập cho đúng nhé Đoạn mã trên mình chỉ hiện thực là cấu hình leftSideMenu vào vị trí bên trái của ứng dụng và nó chỉ có ý nghĩa là đăng ký thôi, nếu bạn muốn 1 số cấu hình liên quan như: chiều rộng của side menu, mặc định có hiển thị không thì mình cấu hình thêm nhé. Đoạn mã bên dưới mình sẽ thêm cấu hình cho phần này

Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            id:'leftMenuSide',
                            name: 'LeftMenuSide'
                        },
                    },
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    titleDisplayMode: 'alwaysShow',
                                },
                            },
                            children: [{
                                stack: {
                                    children: [{
                                        component: {
                                            name: HOME,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'Convert & download youtube to mp4',
                                                    },
                                                },
                                            },
                                        }
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'Youtube2mp3',
                                            icon: homeIcon,
                                        },
                                    },
                                },
                            }, {
                                stack: {
                                    children: [{
                                        component: {
                                            name: ABOUT,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'About',
                                                    },
                                                },
                                            },
                                        },
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'About me',
                                            icon: infoIcon,
                                        },
                                    },
                                },
                            }],
                        },
                    },
                    options: {
                        sideMenu: {
                            left: {
                                width: 400,
                                visible: true
                            }
                        }
                    }
                },

            },
        });

Mình có thêm thuộc tính options: { sideMenu: { left:.. }} để cấu hình cho width và visible của left menu (chiều rộng mình dùng số được thôi nha các bạn, mình không dùng phần trăm được)

Thực hiện mã cho phép hiện thị side menu

Ở phần center của sideMenu mình có layout như hình lúc đầu. Ở layout HomeScreen, mình cần tạo 1 hambuger icon và thêm sự kiện click vào hamburger icon sẽ hiện thị menu trái. Mặc định thì khi đăng ký left side menu thì mình có thể kéo ra vào left side menu được nha các bạn. File HomeScreen mình có mã sau:

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import { useNavigationButtonPress } from 'react-native-navigation-hooks';
import { Navigation } from 'react-native-navigation';

const HomeScreen = ({ componentId }) => {
  useNavigationButtonPress((_) => {
  }, componentId, 'leftSideMenuButton');

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.heading1}>Home screen</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

HomeScreen.options = {
  topBar: {
    leftButtons: {
      id: 'leftSideMenuButton',
      icon: require('../assets/ham-icon.jpg')
    }
  }
}

export default HomeScreen;

 

• 

• 

Do ban đầu ta cấu hình cho left side menu visible nên nó hiện ngay lúc khởi động ứng dụng, Ở màn hình HomeScreen trên mình đã tạo sẵn 1 button ở vị trí left để khi bấm vào đó mình hiện thực mã cho show left side menu. Các bạn theo dõi mã bên dưới lúc mình click vào button với id là leftSideMenuButton

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import { useNavigationButtonPress } from 'react-native-navigation-hooks';
import { Navigation } from 'react-native-navigation';

const HomeScreen = ({ componentId }) => {
  useNavigationButtonPress((_) => {
    Navigation.mergeOptions(componentId, {
      sideMenu: {
        left: {
          visible: true
        }
      }
    })
  }, componentId, 'leftSideMenuButton');

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.heading1}>Home screen</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

HomeScreen.options = {
  topBar: {
    leftButtons: {
      id: 'leftSideMenuButton',
      icon: require('../assets/ham-icon.jpg')
    }
  }
}

export default HomeScreen;

Với đoạn mã khi click vào button, mình gọi mergeOptions cho leftSideMenu visible bằng true là nó hiện left side menu lên à. Với right menu side các bạn cấu hình tương tự left, thay left bằng right Do built-in side menu của wix/react-native-navigation còn nhiều hạn chế, hiện tại phiên bản mới nhất mình vẫn thấy có 1 issue trên ios là overlay bị đè lên không đúng, mình chỉ xử dụng được ở mức như mình đã thao tác ở trên, và kèm theo 1 số cấu hình đơn giản, nên mình chỉ đề cập tới đây

React native navigation drawer extension

Với react native navigation drawer extension này thì mình có nhiều tùy chọn hơn nhé các bạn, và rất dễ sử dụng các bạn có thể coi thêm trên documents của nó. React native navigation drawer extension ra đời nhằm khắc phục side menu của wix hạn chế. happy coding 🙂