react native keyboard area

react-native-keyboard-area

ห้องสมุดนี้จะแก้ไขปัญหาเหล่านี้:

• เมื่อตั้งค่า windowSoftInputMode เป็น adjustNothing กิจกรรม React Native Keyboard, keyboardDidHide และ keyboardDidShow จะหยุดทำงาน (ดูปัญหา #2852)

• เมื่อคีย์บอร์ดปรากฏขึ้น เนื้อหาแอพทั้งหมดจะ เลื่อนขึ้น (iOS และ Android)

• สำหรับแอปพลิเคชั่นแชทที่ต้องการให้ข้อความด้านล่างอยู่ในตำแหน่งเดิมเมื่อปิดคีย์บอร์ดและแสดงการกระทำบางอย่าง สวิตช์จะไม่ราบรื่นนัก

เริ่มต้นใช้งาน

$ yarn add react-native-keyboard-area

ขอแนะนำให้ใช้ React Native > 0.60 การเชื่อมโยงอัตโนมัติจะติดตั้งโมดูล RNKeyboard ดั้งเดิมของไลบรารีนี้สำหรับ iOS และ Android

การแนะนำ

• บน iOS: React Native มีส่วนประกอบที่เรียกว่า KeyboardAvoidingView ล้อมหน้าของคุณด้วยองค์ประกอบนั้น และมันจะเลื่อนเนื้อหาขึ้นเมื่อแป้นพิมพ์ปรากฏขึ้น

• บน Android: ตามค่าเริ่มต้นใน AndroidManifest.xml เรามี windowSoftInputMode ตั้งค่าเป็น adjustResize เนื้อหาแอปทั้งหมดจะเลื่อนขึ้นเมื่อแป้นพิมพ์ปรากฏขึ้น ดังนั้นเราจึงไม่จำเป็นต้องใช้ส่วนประกอบ KeyboardAvoidingView

ทั้งสองวิธี เนื้อหาทั้งหน้าจะเลื่อนขึ้นหรือลง จากนั้นคีย์บอร์ดจะปรากฏขึ้นหรือหายไป

แต่บางครั้งเราไม่จำเป็นต้องใช้ทั้งแอปเพื่อเลื่อนขึ้น ตัวอย่างที่พบบ่อยที่สุดคือแอปพลิเคชัน Chat เราอาจต้องการเปลี่ยนไปใช้ Custom View เมื่อแป้นพิมพ์หายไป

มาที่นี่ห้องสมุดนี้

ไลบรารีนี้ แก้ปัญหาโดยการสร้าง ส่วนประกอบ Wrapper KeyboardArea ส่วนประกอบนี้จะปรับความสูงจากนั้นคีย์บอร์ดจะปรากฏขึ้นหรือหายไป

นอกจากนี้ยังสามารถ ควบคุม สถานะด้วยอุปกรณ์ประกอบ isOpen หรือด้วยวิธี open() และ close() แบบเปิดเผย

ข้อดีอีกประการหนึ่งคือ ReactNaive จะ ไม่ทาสีแอปทั้งหมดใหม่ เมื่อแป้นพิมพ์ปรากฏขึ้น เนื่องจากมุมมองหลักจะไม่เปลี่ยนขนาด

ตัวอย่างโลกแห่งความเป็นจริง: ก่อนและหลัง

ก่อน : ใช้ ReactNative Keyboard หลีกเลี่ยงการดูและปรับขนาด ผลลัพธ์ที่ได้ไม่ค่อยดี หน้าจะ "กระโดด" เมื่อคีย์บอร์ดหายไปหลังสวิตช์	After : การใช้ไลบรารี่นี้ มุมมองทั้งหมดจะไม่เคลื่อนที่ และพื้นที่คีย์บอร์ดใต้อินพุตจะคงความสูงเท่าเดิมระหว่างสวิตช์

มันทำงานอย่างไร?

ไลบรารีนี้มีโค้ดเนทิฟ iOS และ Android บางส่วนที่ต้องแจ้งเตือนผ่านเหตุการณ์ชื่อ KeyboardSizeChanges ซึ่งเป็นส่วนประกอบ KeyboardArea เมื่อความสูงของแป้นพิมพ์เปลี่ยนแปลง

• บน iOS เราแค่ใช้แป้นพิมพ์ UIResponder WillShowNotification และคีย์บอร์ด WillHideNotification เพื่อปล่อยเหตุการณ์ด้วยความสูงปัจจุบัน

• บน Android เราจำเป็นต้องตั้งค่า windowSoftInputMode ให้ adjustNothing เพื่อหลีกเลี่ยงไม่ให้คีย์บอร์ดเลื่อนขึ้นไปทั้งมุมมอง จากนั้นเราจะสร้าง PopupWindow ที่มองไม่เห็นเพื่อฟังการเปลี่ยนแปลงเค้าโครงและวัดความสูงของคีย์บอร์ด

การใช้งาน

ตรรกะส่วนใหญ่อยู่ภายในองค์ประกอบ KeyboardArea เราเพียงแค่ต้องล้อมเนื้อหาที่เราต้องการแสดงเมื่อคีย์บอร์ดหายไป จากนั้นตั้งค่าอุปกรณ์ประกอบฉาก isOpen เมื่อเราต้องการแสดงส่วนประกอบ ChatActionsInput ในกรณีตัวอย่างต่อไปนี้

** นี่เป็นภาพหน้าจอด้านบนเวอร์ชันที่เรียบง่าย **

 import { KeyboardArea , KeyboardAreaRef } from 'react-native-keyboard-area' ;

/// ...
keyboardSpacerRef = createRef < KeyboardSpacerRef > ( ) ;

handleUserClick = ( ) => {
    this . keyboardSpacerRef . current ?. close ( ) ;
}

handleChangeMode = ( ) => {
    this . setState ( prev => ( {
      inputMode :
        prev . inputMode === ChatInputModes . Actions
          ? ChatInputModes . Text
          : ChatInputModes . Actions ,
    } ) ) ;
}

keyboardAreaHeightChanged = ( isOpen : boolean , currentHeight : number ) => {
  // Your logic
} ;

render ( ) {

    return (
        < PageContent >
            < ChatMessageList />
            < ChatTextInput onChangeMode = { this . handleChangeMode } />
            < KeyboardSpacer
                ref = { this . keyboardSpacerRef }
                isOpen = { inputMode === ChatInputModes . Actions }
                onChange = { this . keyboardAreaHeightChanged }
            >
                < ChatActionsInput />
            </ KeyboardSpacer >
        </ PageContent >
    ) ;
} 

บันทึกย่อของ Android

เนื่องจากบน Android เราอาจต้องการใช้ adjustResize สำหรับเพจอื่นๆ เราจึงสามารถใช้ไลบรารี่ setWindowSoftInputMode นี้เพื่อเปลี่ยนโหมด SoftInput แบบไดนามิกสำหรับเพจที่เราต้องการเท่านั้น เช่น:

 import { RNKeyboard , SoftInputMode } from 'react-native-keyboard-area' ;

// Example with react-navigation page focus/blur events

componentDidMount ( ) {
  navigation . addListener ( 'blur' , this . componentDidExit ) ;
  navigation . addListener ( 'focus' , this . componentDidEnter ) ;
}

componentDidEnter = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_NOTHING , ) ;
  }
} ;

componentDidExit = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_RESIZE ) ;
  }
} ;

componentWillUnmount ( ) {
  navigation . removeListener ( 'blur' , this . componentDidExit ) ;
  navigation . removeListener ( 'focus' , this . componentDidEnter ) ;
}

เครดิต

สำหรับ Android เครดิตทั้งหมดเป็นของ Cristian Holdunu และ Siebe Brouwer สำหรับการนำแนวคิด PopupWindow ไปใช้ และเพื่อคำนวณความสูงของแป้นพิมพ์ ฉันเพิ่งย้ายมันลงในระบบโมดูล React Native