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




على الشاشة (17)

إذا قمت بالنقر فوق أحد النصوص ، فأنا أريد أن أكون قادرًا على النقر في أي مكان آخر لاستبعاد لوحة المفاتيح مرة أخرى (وليس مفتاح العودة على الرغم من ذلك). لم أجد أدنى جزء من المعلومات المتعلقة بهذا الأمر في جميع البرامج التعليمية ومشاركات المدونات التي قرأتها.

هذا المثال الأساسي لا يزال لا يعمل بالنسبة لي مع رد فعل الأصلي 0.4.2 في محاكي. لا يمكن أن تجربها على اي فون الخاص بي حتى الآن.

<View style={styles.container}>
    <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}}
      onEndEditing={this.clearFocus}
    />
  </View>

Answers

أنا العلامة التجارية الجديدة للرد ، وركض في نفس المشكلة بالضبط أثناء تقديم تطبيق تجريبي. إذا كنت تستخدم دعامة 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 داخل عرض الحاوية سيستمر في استبعاد لوحة المفاتيح.


const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

النهج رقم 2

بفضل user @ ricardo-stuven للإشارة إلى ذلك ، هناك طريقة أخرى أفضل لاستبعاد لوحة المفاتيح التي يمكنك رؤيتها في github.com/facebook/react-native/blob/… في المستندات الأصلية المتفاعلة.

Keyboard استيراد بسيطة Keyboard انها طريقة dismiss()


الإجابة البسيطة هي استخدام ScrollView بدلاً من View وتعيين الخاصية القابلة للتمرير إلى false (قد تحتاج إلى ضبط بعض التصميم على الرغم من ذلك).

بهذه الطريقة ، يتم تجاهل لوحة المفاتيح في اللحظة التي أنقر فيها في مكان آخر. قد تكون هذه مشكلة متعلقة بالتفاعل الأصلي ، ولكن يبدو أن النقر على الأحداث يتم التعامل معه باستخدام ScrollViews الذي يؤدي إلى السلوك الموضح.

تحرير: بفضل jllodra. يرجى ملاحظة أنه إذا قمت بالنقر مباشرة في Textinput آخر ثم في الخارج ، فإن لوحة المفاتيح لن تخفي.



لقد اختبرت هذا فقط باستخدام أحدث نسخة React Native (0.4.2) ، ورفضت لوحة المفاتيح عندما تنقر على مكان آخر.

و FYI: يمكنك تعيين وظيفة رد اتصال ليتم تنفيذها عند استبعاد لوحة المفاتيح عن طريق تعيينها إلى دعم "onEndEditing".


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

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

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


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


إذا كان أي شخص يحتاج إلى مثال عملي لكيفية استبعاد إدخال نص متعدد الأسطر هنا ، فانتقل! نأمل أن يساعد هذا بعض الناس هناك ، فإن المستندات لا تصف طريقة لفصل المدخلات متعددة الأسطر على الإطلاق ، على الأقل لم يكن هناك إشارة محددة حول كيفية القيام بذلك. لا يزال مستجد للنشر فعلا هنا على المكدس ، إذا كان أي شخص يعتقد أن هذا يجب أن يكون مرجعا للنشر الفعلي كتب هذا المقتطف لإعلامنا.

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      behavior: 'position',
    }
    this._keyboardDismiss = this._keyboardDismiss.bind(this)
  }

  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove()
  }

  _keyboardDidHide() {
    Keyboard.dismiss()
  }

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={this.state.behavior}
      >
        <TouchableOpacity onPress={this._keyboardDidHide}>
          <View>
            <TextInput
              style={{
                color: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}

في استخدام ScrollView

keyboardShouldPersistTaps="handled" 

هذا سوف يقوم بعملك.


يمكنك استيراد keyboard من رد الفعل الأصلي مثل أدناه:

import { Keyboard } from 'react-native';

وفي شفرتك تفعل شيء من هذا القبيل:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

استبعاد ثابت ()

يرفض لوحة المفاتيح النشطة ويزيل التركيز.


تصبح المشكلة مع لوحة المفاتيح التي لا يتم تجاهلها أكثر قسوة إذا كان لديك keyboardType='numeric' ، حيث لا توجد طريقة لإزالتها.

لا يعد استبدال العرض مع ScrollView حلاً صحيحًا ، كما لو كان لديك عدة textInput أو button s ، فإن النقر عليها أثناء تشغيل لوحة المفاتيح لن يؤدي إلا إلى استبعاد لوحة المفاتيح.

الطريقة الصحيحة هي لتغليف عرض مع TouchableWithoutFeedback واستدعاء Keyboard.dismiss()

اذا كنت تمتلك

<View style={styles.container}>
    <TextInput keyboardType='numeric'/>
</View>

تغييره إلى

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={styles.container}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

تحرير: يمكنك أيضًا إنشاء مكون ترتيب مرتفع لإلغاء لوحة المفاتيح.

import React from 'react';
import { TouchableWithoutFeedback, Keyboard } from 'react-native';

const DismissKeyboardHOC (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};

ببساطة استخدمها هكذا

const DismissKeyboardView = DismissKeyboardHOC(View)
...
render() {
    <DismissKeyboardView>
        ...
    </DismissKeyboardView>
}

ملاحظة: مطلوب accessible={false} لجعل نموذج الإدخال يستمر في الوصول إليه من خلال VoiceOver. ضعاف البصر سيشكرك!


ماذا عن وضع مكون ملموس حول / بجانب 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 هو المكان المشار إليه.


استخدم 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>

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



ReactJS هي مكتبة جافا سكريبت والتي تستخدم لبناء واجهات الويب. ستحتاج إلى أداة حزم مثل webpack ومحاولة تثبيت الوحدات التي ستحتاجها لإنشاء موقعك على الويب.

React Native عبارة عن إطار عمل ويأتي مع كل ما تحتاجه لكتابة تطبيقات ios و android المدمجة. ستحتاج إلى تثبيت xcode و android studio لإنشاء تطبيقك وتشغيله.

على عكس ReactJS ، لا يستخدم React-Native HTML ولكن مكونات مشابهة يمكنك استخدامها عبر ios و android لإنشاء تطبيقك. تستخدم هذه المكونات مكونات أصلية حقيقية لبناء تطبيقات ios و android. بسبب هذه التطبيقات التفاعلية React-Native تبدو حقيقية على عكس منصات التطوير المختلطة الأخرى. تزيد المكونات أيضًا من إمكانية إعادة استخدام الشفرة لأنك لا تحتاج إلى إنشاء واجهة مستخدم واحدة مرة أخرى على ios و android.

أود أن أوصي جميع مطوري ios و android أن يكونوا ممتعين مع هذه المكتبة.





reactjs react-native