Stack flash message component for React Native
npm install react-native-stack-flash-messageReact Native 를 위한 Stack Flash Message 컴포넌트
- 하나의 플래시 메세지 컴포넌트를 모든 컴포넌트들에서 호출할 수 있습니다
- 쌓이는 플래쉬 메세지를 보여줍니다
- 사용자에게 시스템 메세지를 여러 개 보여줄 수 있습니다
- 메세지 내의 아이콘을 설정할 수 있고, 메세지의 테마를 지정할 수 있습니다
| iOS | Android |
| --- | --- |
| !iOS Demo | !Android Demo |
``sh`
yarn add react-native-stack-flash-message
또는
`sh`
npm install react-native-stack-flash-message
`js
// ...
import StackFlashMessage from 'react-native-stack-flash-message';
const App: React.FC = () => {
const flash = (options: Options) => {
StackFlashMessage.show(options);
};
const successFlash = () => {
flash({
type: 'success',
title: '안녕!',
contents: '이 곳에 내용을 입력해봐!',
duration: Math.random() * 1000,
});
};
const infoFlash = () => {
flash({
type: 'info',
title: '안녕!',
contents: '이 곳에 내용을 입력해봐!',
});
};
const errorFlash = () => {
flash({
type: 'error',
title: '안녕!',
contents: '이 곳에 내용을 입력해봐!',
});
};
return (
/>
);
};
`
| 이름 | 기본값 | 설명 |
|--------------------------------------------------------------------|----------------------------------------------------------------|---------------------------|
| containerStyle?: ViewStyle | undefined | 메세지들을 감싸고 있는 Node의 스타일 |messageContainerStyle?: ViewStyle
| | undefined | 메세지 전체를 감싸고 있는 Node의 스타일 |messageWrapperStyle?: ViewStyle
| | undefined | 메세지를 감싸고 있는 Node의 스타일 |messageStyle?: ViewStyle
| | undefined | 메세지 Node의 스타일 |contentsWrapperStyle?: ViewStyle
| | undefined | 제목 및 설명을 감싸고 있는 Node의 스타일 |titleProps?: TextProps & { [key: string]: any }
| | undefined | 제목의 props |contentsProps?: TextProps & { [key: string]: any }
| | undefined | 설명의 props |titleComponent?: ElementType
| | Text | 제목 컴포넌트 |contentsComponent?: ElementType
| | Text | 설명 컴포넌트 |theme?: { success: string, info: string, error: string }
| | { success: 'blue', info: 'green', error: 'red' } | 메세지들의 테마 |icon?: { success: ReactNode, info: ReactNode, error: ReactNode }
| | { success: Image 컴포넌트, info: Image 컴포넌트, error: Image 컴포넌트 } | 테마별 메세지의 아이콘 |visibleProgress?: boolean
| | true` | Progress 노출 여부 |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT