AloPeykSnackbar

Alopeyk-snackbar

ปลั๊กอิน Snackbar สำหรับ React-Native

คุณสมบัติ

• รองรับทิศทาง RTL/LTR
• ธีมที่ปรับแต่งได้

การติดตั้ง

$ npm install alopeyk-snackbar --save

แล้ว:

$ react-native link alopeyk-snackbar

ขั้นตอนพิเศษสำหรับ iOS

เนื่องจาก repo นี้เขียนด้วย Swift คุณควรคัดลอก Test.swift จาก node_modulles/alopeyk-snackbar/ios ไปยัง Xcode Project Navigator ของโครงการของคุณ [your project's name] จากนั้นคลิกที่ copy items if needed เลือกเพิ่มบริดจ์

การติดตั้งด้วยตนเอง

iOS

1. repo นี้เขียนด้วย Swift และสำหรับการเชื่อมโยงรหัส Swift กับโครงการของคุณคุณต้องคัดลอก Test.swift จาก node_modules/alopeyk-snackbar/ios ลงใน Xcode Project Navigator ของโครงการ [your project's name]
2. ใน Xcode ใน Project Libraries คลิกขวา➜ Add Files to [your project's name]
3. ไปที่ node_modules ➜ alopeyk-snackbar และเพิ่ม RNSnackbar.xcodeproj
4. ใน Xcode ใน Project Navigator เลือกโครงการของคุณ เพิ่ม libRNSnackbar.a ลงใน Build Phases โครงการของคุณ➜ Link Binary With Libraries
5. เรียกใช้โครงการของคุณ ( Cmd+R ) <

Android

1. เปิด android/app/src/main/java/[...]/MainApplication.java

• เพิ่ม import com.alopeyk.nativemodule.RNSnackbarPackage; ไปยังการนำเข้าที่ด้านบนของไฟล์
• เพิ่ม new RNSnackbarPackage() ลงในรายการที่ส่งคืนโดยวิธี getPackages()

2. ผนวกบรรทัดต่อไปนี้เข้ากับ android/settings.gradle :

    include ':alopeyk-snackbar'
   project(':alopeyk-snackbar').projectDir = new File(rootProject.projectDir, 	'../node_modules/alopeyk-snackbar/android')
   

3. แทรกบรรทัดต่อไปนี้ภายในบล็อกการพึ่งพาใน android/app/build.gradle :

     compile project(':alopeyk-snackbar')
   

การใช้งาน

 import Snackbar from 'alopeyk-snackbar' ;

Snackbar . show ( {
	title : 'Please agree to this.' ,
	duration : Snackbar . LENGTH_INDEFINITE ,
	backgroundColor : 'silver' ,
	color : '#333' ,
	maxLines : 3 , //Default: 2
	barPosition : Snackbar . BAR_POSITION_TOP , //Default: Snackbar.BAR_POSITION_BOTTOM
	direction : Snackbar . DIRECTION_RTL , //Default: Snackbar.DIRECTION_LTR
	action : {
		title : 'AGREE' ,
		onPress : ( ) => Snackbar . show ( { title : 'Thank you!' } ) ,
		color : '#992222' ,
	} ,
} ) ;

// dismiss snackbar
Snackbar . dismiss ( ) ;