React Native可定制底板組件Magic Sheet使用示例

更新時間：2022年10月26日 14:08:27 作者：Jovie

這篇文章主要為大家介紹了React Native可定制的底板組件Magic Sheet使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

一個React Native組件，通過提供一個強制性的API，可以從應(yīng)用程序的任何地方（甚至在組件之外）調(diào)用，以顯示一個完全可定制的底部表單，并能夠等待它解決并得到一個響應(yīng)。

這個庫依賴于Gorhom的/bottom-sheet 的模態(tài)組件，并接受相同的道具和兒童。

如何使用它

1.安裝并導(dǎo)入

# Yarn
$ yarn add react-native-magic-sheet

# NPM
$ npm i react-native-magic-sheet

2.基本使用方法

import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {MagicSheetPortal} from 'react-native-magic-sheet';
export default function App() {
  return (
    <OtherProviders>
        <GestureHandlerRootView style={{flex: 1}}>
            <BottomSheetModalProvider>
                <MagicSheetPortal {...defaultProps}/>  // <-- On the top of the app component hierarchy
                <AppComponents /> // The rest of the app goes here
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
    </OtherProviders>
  );
}

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { magicSheet } from 'react-native-magic-sheet';
const PickerSheet = (someProps) => (
  <View>
    <TouchableOpacity 
    onPress={() => {
        magicSheet.hide({userName: "Rod", id:1})
    }}> // This will hide the sheet, resolve the promise with the passed object
      <Text>Return user</Text>
    </TouchableOpacity>
  </View>
);
const handlePickUser = async () => {
  // We can call it with or without props, depending on the requirements.
  const result = await magicSheet.show(PickerSheet);
  //OR (with props)
  const result = await magicSheet.show(() => <PickerSheet {...someProps}/>);
  console.log(result) 
  // will show {userName: "Rod", id:1}, or undefined if sheet is dismissed
};
export const Screen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handlePickUser}>
        <Text>Show sheet</Text>
      </TouchableOpacity>
    </View>
  );
};