reactjs مسح لائحه - إخفاء لوحة المفاتيح في رد فعل الأصلي

استخدم github.com/facebook/react-native/blob/master/Libraries/… رفض github.com/facebook/react-native/blob/master/Libraries/… في github.com/facebook/react-native/blob/master/Libraries/… Native.

كان لدي مشكلة مشابهة جدا وشعرت أنني كنت الوحيد الذي لم يحصل عليه.

ScrollViews

إذا كان لديك ScrollView ، أو أي شيء يرث منه مثل ListView ، يمكنك إضافة دعامة من شأنها أن ترفض لوحة المفاتيح تلقائيًا استنادًا إلى أحداث الضغط أو السحب.

والدعامة هي keyboardDismissMode ويمكن أن يكون لها قيمة none ، interactive أو on-drag . يمكنك قراءة المزيد عن ذلك keyboardDismissMode .

وجهات النظر العادية

إذا كان لديك شيء آخر غير ScrollView وكنت ترغب في أن تضغط أي أزرار على لوحة المفاتيح ، فيمكنك استخدام onPress واستخدام onPress لاستخدام الأداة المساعدة لـ github.com/facebook/react-native/blob/master/Libraries/… لاستبعاد لوحة المفاتيح github.com/facebook/react-native/blob/master/Libraries/… لوحة المفاتيح نيابة عنك.

في المثال الخاص بك ، يمكنك القيام بشيء كالتالي:

var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.

// Wrap your view with a TouchableWithoutFeedback component like so.

<View style={styles.container}>

  <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>

    <View>

      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>

      <Text style={styles.instructions}>
        To get started, edit index.ios.js
      </Text>

      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>

      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />

    </View>

  </TouchableWithoutFeedback>

</View>

ملاحظة: لا يمكن أن يكون لـ TouchableWithoutFeedback سوى طفل واحد ، لذا تحتاج إلى لف كل شيء أسفله في View واحد كما هو موضح أعلاه.

أنا العلامة التجارية الجديدة للرد ، وركض في نفس المشكلة بالضبط أثناء تقديم تطبيق تجريبي. إذا كنت تستخدم دعامة onStartShouldSetResponder (الموصوفة here ) ، يمكنك انتزاع اللمسات على React.View القديم. من المستغرب سماع أفكار "كاونتر" الأكثر خبرة حول هذه الاستراتيجية / إذا كان هناك حل أفضل ، لكن هذا هو ما نجحت بالنسبة لي:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

شيئان يجب ملاحظتهما هنا. أولاً ، كما نوقش github.com/facebook/react-native/issues/113 ، لا يوجد حتى الآن طريقة لإنهاء تحرير جميع المقارنات الفرعية ، لذلك يجب علينا الرجوع إلى TextInput مباشرةً TextInput . ثانيًا ، يتم اعتراض onStartShouldSetResponder بواسطة عناصر تحكم أخرى onStartShouldSetResponder فوقه. لذلك لن يؤدي النقر فوق TextInput إلخ (بما في ذلك TextInput آخر) داخل عرض الحاوية إلى تشغيل الحدث. ومع ذلك ، فإن النقر فوق Image داخل عرض الحاوية سيستمر في استبعاد لوحة المفاتيح.

استخدم ScrollView بدلاً من View وتعيين السمة keyboardShouldPersistTaps إلى false.

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>

الاستخدام ScrollView من ScrollView لـ ScrollView React Native 0.39

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

على الرغم من وجود مشكلة في مربعي TextInput . على سبيل المثال. قد يقوم نموذج اسم المستخدم وكلمة المرور الآن بإقالة لوحة المفاتيح عند التبديل بين المدخلات. هل ترغب في الحصول على بعض الاقتراحات للحفاظ على لوحة المفاتيح على قيد الحياة عند التبديل بين TextInputs أثناء استخدام ScrollView .

إذا لم أكن مخطئًا ، فقد تمكنت أحدث نسخة من React Native من حل هذه المشكلة المتمثلة في القدرة على استبعاد لوحة المفاتيح من خلال النقر.

ماذا عن وضع مكون ملموس حول / بجانب TextInput ؟

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

باستخدام keyboardShouldPersistTaps في ScrollView يمكنك تمرير في "معالجة" ، التي تتعامل مع المشاكل التي يقولها الأشخاص تأتي مع استخدام ScrollView. هذا ما تقوله الوثائق حول استخدام 'handled': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Here هو المكان المشار إليه.

سوف Keyboard.dismiss() تفعل ذلك. ولكن في بعض الأحيان قد يفقد التركيز وسيتعذر على لوحة المفاتيح العثور على المرجع. والطريقة الأكثر اتساقًا للقيام بذلك هي وضع ref=_ref على النص textInput ، وفعل _ref.blur() عندما تحتاج إلى _ref.focus() ، و _ref.focus() عندما تحتاج إلى إعادة لوحة المفاتيح.