react-native-snackbar

npm install @react-native-oh-tpl/react-native-snackbar

yarn add @react-native-oh-tpl/react-native-snackbar

import React from "react";
import { View, StyleSheet, Button, ScrollView } from "react-native";
import Snackbar from "react-native-snackbar";

export const SnackbarTest = () => {
  return (
    <View
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "white",
        flex: 1,
      }}
    >
      <ScrollView style={styles.container}>
        <Button
          title="点击显示组件"
          onPress={() => {
            Snackbar.show({
              text: "Hello harmony",
              marginBottom: 300,
            });
          }}
        />
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    backgroundColor: "#333",
    flex: 1,
  },
  Snackbar: {
    width: "100%",
    backgroundColor: "white",
  },
});

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-snackbar": "file:../../node_modules/@react-native-oh-tpl/react-native-snackbar/harmony/snackbar.har"
  }

cd entry
ohpm install

...
+ import {RNSnackbarPackage} from '@react-native-oh-tpl/react-native-snackbar/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNSnackbarPackage(ctx)
  ];
}

cd entry
ohpm install

  componentDidMount() {
    const SnackbarEventEmitter = new NativeEventEmitter(
      NativeModules.RNSnackbar,
    );
    this.eventListener = SnackbarEventEmitter.addListener('onSnackbarVisibility', (event) => {
      console.log(event.event);
    });
  }

  componentWillUnmount() {
    this.eventListener.remove();
  }

useEffect(() => {
  const subscription = new NativeEventEmitter(
    NativeModules.RNSnackbar
  ).addListener("onSnackbarVisibility", (event) => {
    console.log(event.event);
  });
  return () => {
    subscription.remove();
  };
}, []);