react-native - computer - windows 10 all shortcut keys




जब TextInput ध्यान केंद्रित किया है, तो कीबोर्ड के पीछे से खिड़की को ऑटो-स्लाइड कैसे करें? (10)

@Stephen

यदि आपको ऐसा प्रतीत नहीं होता है कि कीबोर्ड जिस दर पर दिखाई दे रहा है ठीक उसी दर पर, आप लेआउटअनिमेशन का उपयोग कर सकते हैं, ताकि कम से कम ऊँचाई जगह पर न उछले। जैसे

प्रतिक्रिया-मूल से LayoutAnimation आयात करें और अपने घटक में निम्न विधियाँ जोड़ें।

getInitialState: function() {
    return {keyboardSpace: 0};
  },
   updateKeyboardSpace: function(frames) {
    LayoutAnimation.configureNext(animations.layout.spring);
    this.setState({keyboardSpace: frames.end.height});
  },

  resetKeyboardSpace: function() {
    LayoutAnimation.configureNext(animations.layout.spring);
    this.setState({keyboardSpace: 0});
  },

  componentDidMount: function() {
    KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
    KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
  },

  componentWillUnmount: function() {
    KeyboardEventEmitter.off(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
    KeyboardEventEmitter.off(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
  },

कुछ उदाहरण एनिमेशन हैं (मैं ऊपर स्प्रिंग का उपयोग कर रहा हूं):

var animations = {
  layout: {
    spring: {
      duration: 400,
      create: {
        duration: 300,
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity,
      },
      update: {
        type: LayoutAnimation.Types.spring,
        springDamping: 400,
      },
    },
    easeInEaseOut: {
      duration: 400,
      create: {
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.scaleXY,
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut,
      },
    },
  },
};

अपडेट करें:

नीचे दिए गए @ शर्लक के उत्तर को देखें, प्रतिक्रिया-देशी 0.11 के रूप में कीबोर्ड का आकार बदलने को कार्यक्षमता में निर्मित का उपयोग करके हल किया जा सकता है।

मैंने विंडो हैक करने के लिए देशी ऐप्स के लिए इस हैक को देखा है, लेकिन रिएक्ट नेटिव में इसे करने का सबसे अच्छा तरीका सोच रहा हूं ... जब एक <TextInput> फील्ड फोकस हो जाता है और व्यू में कम स्थित होता है, तो कीबोर्ड कवर हो जाएगा पाठ का क्षेत्र।

आप इस मुद्दे को उदाहरण UIExplorer के TextInputExample.js दृश्य में देख सकते हैं।

क्या किसी के पास कोई अच्छा उपाय है?


Facebook ने इस समस्या को हल करने के लिए देशी 0.29 पर प्रतिक्रिया में KeyboardAvoidingView किया। दस्तावेज़ीकरण और उपयोग का उदाहरण here पाया जा सकता here


इसे इस्तेमाल करे:

import React, {
  DeviceEventEmitter,
  Dimensions
} from 'react-native';

...

getInitialState: function() {
  return {
    visibleHeight: Dimensions.get('window').height
  }
},

...

componentDidMount: function() {
  let self = this;

  DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
    self.keyboardWillShow(e);
  });

  DeviceEventEmitter.addListener('keyboardWillHide', function(e: Event) {
      self.keyboardWillHide(e);
  });
}

...

keyboardWillShow (e) {
  let newSize = Dimensions.get('window').height - e.endCoordinates.height;
  this.setState({visibleHeight: newSize});
},

keyboardWillHide (e) {
  this.setState({visibleHeight: Dimensions.get('window').height});
},

...

render: function() {
  return (<View style={{height: this.state.visibleHeight}}>your view code here...</View>);
}

...

इसने मेरे लिए काम किया। जब कीबोर्ड प्रदर्शित होता है, तो यह दृश्य मूल रूप से सिकुड़ जाता है और इसके छिपे होने पर फिर से बढ़ता है।



मैं अपने स्क्रोलव्यू के निचले हिस्से को ऊपर उठाने के लिए ब्रिस्गो उत्तर का उपयोग करता हूं। तब मैं onccroll का उपयोग स्क्रॉलव्यू की वर्तमान स्थिति को अपडेट करने के लिए करता हूं। मैंने तब इस रिएक्टिव नेटिव को पाया : टेक्स्टिनपुट की स्थिति प्राप्त करने के लिए एक तत्व की स्थिति प्राप्त करना। मैं तब कुछ सरल गणित करता हूं ताकि पता चल सके कि इनपुट वर्तमान दृश्य में है। फिर मैं न्यूनतम राशि और एक मार्जिन को स्थानांतरित करने के लिए स्क्रोल्टो का उपयोग करता हूं। यह बहुत चिकनी है। स्क्रॉलिंग भाग के लिए कोड का उपयोग करता है:

            focusOn: function(target) {
                return () => {
                    var handle = React.findNodeHandle(this.refs[target]);
                    UIManager.measureLayoutRelativeToParent( handle, 
                        (e) => {console.error(e)}, 
                        (x,y,w,h) => {
                            var offs = this.scrollPosition + 250;
                            var subHeaderHeight = (Sizes.width > 320) ? Sizes.height * 0.067 : Sizes.height * 0.077;
                            var headerHeight = Sizes.height / 9;
                            var largeSpace = (Sizes.height - (subHeaderHeight + headerHeight));
                            var shortSpace = largeSpace - this.keyboardOffset;
                            if(y+h >= this.scrollPosition + shortSpace) {
                                this.refs.sv.scrollTo(y+h - shortSpace + 20);
                            }
                            if(y < this.scrollPosition) this.refs.sv.scrollTo(this.scrollPosition - (this.scrollPosition-y) - 20 );
                        }
                     );
                };
            },

मैं एक सरल विधि का उपयोग कर रहा हूं, लेकिन यह अभी तक एनिमेटेड नहीं है। मेरे पास एक घटक स्थिति है जिसे "bumpedUp" कहा जाता है, जिसे मैं 0 में डिफ़ॉल्ट करता हूं, लेकिन 1 पर सेट होता है, जब textInput फोकस हो जाता है, जैसे:

मेरे textInput पर:

onFocus={() => this.setState({bumpedUp: 1})}
onEndEditing={() => this.setState({bumpedUp: 0})}

मेरे पास शैली भी है जो उस स्क्रीन पर हर चीज़ के रैपिंग कंटेनर को एक निचला मार्जिन और नकारात्मक शीर्ष मार्जिन देता है, जैसे:

mythingscontainer: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "column",
},
bumpedcontainer: {
  marginBottom: 210,
  marginTop: -210,
},

और फिर रैपिंग कंटेनर पर, मैंने शैलियों को इस तरह सेट किया:

<View style={[styles.mythingscontainer, this.state.bumpedUp && styles.bumpedcontainer]}>

इसलिए, जब "bumpedUp" स्थिति 1 पर सेट हो जाती है, तो bumpedcontainer शैली अंदर आती है और सामग्री को ऊपर ले जाती है।

Kinda हैकी और मार्जिन हार्डकोड हैं, लेकिन यह काम करता है :)


मैंने TextInput.onFocus और ScrollView.scrollTo का उपयोग किया।

...
<ScrollView ref="scrollView">
...
<TextInput onFocus={this.scrolldown}>
...
scrolldown: function(){
  this.refs.scrollView.scrollTo(width*2/3);
},

शायद देर हो गई है, लेकिन सबसे अच्छा समाधान एक मूल पुस्तकालय, IQKeyboardManager का उपयोग करना है

बस खींचें और IQKeyboardManager निर्देशिका को डेमो प्रोजेक्ट से अपने iOS प्रोजेक्ट पर छोड़ दें। बस। इसके अलावा आप कुछ वेलस को सेटअप कर सकते हैं, जैसा कि टूलबार सक्षम है, या AppDelegate.m फाइल में टेक्स्ट इनपुट और कीबोर्ड के बीच का स्थान है। अनुकूलन के बारे में अधिक जानकारी GitHub पृष्ठ लिंक में है जिसे मैंने जोड़ा है।


हमने कुछ कोड फॉर्म प्रतिक्रिया-मूल-कीबोर्ड-स्पेसर और @Sherlock से कोड को एक KeyboardHandler घटक बनाने के लिए संयोजित किया है जिसे TextInput तत्वों के साथ किसी भी दृश्य के चारों ओर लपेटा जा सकता है। एक जादू की तरह काम करता है! :-)

/**
 * Handle resizing enclosed View and scrolling to input
 * Usage:
 *    <KeyboardHandler ref='kh' offset={50}>
 *      <View>
 *        ...
 *        <TextInput ref='username'
 *          onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>
 *        ...
 *      </View>
 *    </KeyboardHandler>
 * 
 *  offset is optional and defaults to 34
 *  Any other specified props will be passed on to ScrollView
 */
'use strict';

var React=require('react-native');
var {
  ScrollView,
  View,
  DeviceEventEmitter,
}=React;


var myprops={ 
  offset:34,
}
var KeyboardHandler=React.createClass({
  propTypes:{
    offset: React.PropTypes.number,
  },
  getDefaultProps(){
    return myprops;
  },
  getInitialState(){
    DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
      if (!frames.endCoordinates) return;
      this.setState({keyboardSpace: frames.endCoordinates.height});
    });
    DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
      this.setState({keyboardSpace:0});
    });

    this.scrollviewProps={
      automaticallyAdjustContentInsets:true,
      scrollEventThrottle:200,
    };
    // pass on any props we don't own to ScrollView
    Object.keys(this.props).filter((n)=>{return n!='children'})
    .forEach((e)=>{if(!myprops[e])this.scrollviewProps[e]=this.props[e]});

    return {
      keyboardSpace:0,
    };
  },
  render(){
    return (
      <ScrollView ref='scrollView' {...this.scrollviewProps}>
        {this.props.children}
        <View style={{height:this.state.keyboardSpace}}></View>
      </ScrollView>
    );
  },
  inputFocused(_this,refName){
    setTimeout(()=>{
      let scrollResponder=this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        React.findNodeHandle(_this.refs[refName]),
        this.props.offset, //additionalOffset
        true
      );
    }, 50);
  }
}) // KeyboardHandler

module.exports=KeyboardHandler;

2017 उत्तर

KeyboardAvoidingView शायद अब जाने का सबसे अच्छा तरीका है। here डॉक्स देखें। यह Keyboard मॉड्यूल की तुलना में वास्तव में सरल है जो डेवलपर को एनिमेशन प्रदर्शन करने के लिए अधिक नियंत्रण देता है। स्पेंसर कारली ने अपने माध्यम ब्लॉग पर सभी संभव तरीकों का प्रदर्शन किया।

2015 उत्तर

react-native में ऐसा करने का सही तरीका बाहरी पुस्तकालयों की आवश्यकता नहीं है, देशी कोड का लाभ उठाता है, और इसमें एनिमेशन भी शामिल हैं।

पहले एक फ़ंक्शन को परिभाषित करें जो प्रत्येक TextInput (या किसी अन्य घटक जिसे आप स्क्रॉल करना चाहते हैं) के लिए onFocus घटना को संभालेंगे:

// Scroll a component into view. Just pass the component ref string.
inputFocused (refName) {
  setTimeout(() => {
    let scrollResponder = this.refs.scrollView.getScrollResponder();
    scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
      React.findNodeHandle(this.refs[refName]),
      110, //additionalOffset
      true
    );
  }, 50);
}

फिर, अपने रेंडर फंक्शन में:

render () {
  return (
    <ScrollView ref='scrollView'>
        <TextInput ref='username' 
                   onFocus={this.inputFocused.bind(this, 'username')}
    </ScrollView>
  )
}

यह कीबोर्ड घटनाओं और साइज़िंग के लिए RCTDeviceEventEmitter का उपयोग करता है, RCTDeviceEventEmitter का उपयोग करके घटक की स्थिति को RCTUIManager.measureLayout , और RCTUIManager.measureLayout में आवश्यक सटीक स्क्रॉल आंदोलन की गणना करता है।

आप अपने विशिष्ट UI डिज़ाइन की आवश्यकताओं को पूरा करने के लिए additionalOffset पैरामीटर के साथ खेलना चाहते हैं।







react-native