আমি নেটিভ অ্যাপ্লিকেশনগুলির জন্য উইন্ডোটি স্বয়ংক্রিয়ভাবে স্ক্রোল করার জন্য এই হ্যাকটি দেখেছি, তবে এটি রিয়েকটিভ নেটিভে করার সর্বোত্তম উপায়টির বিষয়ে ভাবছি ... যখন কোনও <TextInput>ক্ষেত্র ফোকাস হয়ে যায় এবং ভিউতে নিম্ন অবস্থানে থাকে, কীবোর্ডটি পাঠ্য ক্ষেত্রটি কভার করবে।
আপনি এই সমস্যাটি উদাহরণস্বরূপ ইউআইএক্সপ্লোরারের TextInputExample.jsদৃশ্যে দেখতে পারেন।
কারও কি ভাল সমাধান হতে পারে?
উত্তর:
2017 উত্তর
KeyboardAvoidingViewসম্ভবত এখন যেতে ভাল উপায়। ডক্সটি এখানে দেখুন । এটি Keyboardমডিউলের তুলনায় সত্যই সহজ যা বিকাশকারীকে অ্যানিমেশন সম্পাদন করতে আরও নিয়ন্ত্রণ দেয়। স্পেনসার কার্লি তার মাঝারি ব্লগে সম্ভাব্য সমস্ত উপায় প্রদর্শন করেছেন ।
2015 উত্তর
এটি করার সঠিক পদ্ধতিতে react-nativeবাহ্যিক গ্রন্থাগারগুলির প্রয়োজন হয় না, নেটিভ কোডের সুবিধা নেয় এবং এনিমেশন অন্তর্ভুক্ত থাকে।
প্রথমে একটি ফাংশন সংজ্ঞায়িত করুন যা onFocusপ্রতিটিটির জন্য ইভেন্টটি পরিচালনা করবে TextInput(বা অন্য কোনও উপাদান যা আপনি স্ক্রোল করতে চান):
// 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কীবোর্ড ইভেন্ট এবং আকার দেওয়ার জন্য ব্যবহার করে RCTUIManager.measureLayout, ব্যবহার করে উপাদানটির অবস্থান পরিমাপ করে এবং এতে প্রয়োজনীয় স্ক্রোলের গতিবিধি গণনা করে scrollResponderInputMeasureAndScrollToKeyboard।
additionalOffsetআপনার নির্দিষ্ট ইউআই ডিজাইনের প্রয়োজন অনুসারে আপনি প্যারামিটারটি নিয়ে খেলতে চাইতে পারেন ।
import {findNodeHandle} from 'react-native' স্ট্যাকওভারফ্লো.com
ফেসবুক sourced খোলা KeyboardAvoidingView দেশীয় 0.29 প্রতিক্রিয়া এই সমস্যা সমাধানের জন্য। ডকুমেন্টেশন এবং ব্যবহারের উদাহরণ এখানে পাওয়া যাবে ।
DeviceEventEmitter.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
আমরা কিছু কোড ফর্মকে রিট্যাক্ট-নেটিভ-কীবোর্ড-স্পেসার এবং @ শেরলক থেকে কোডটি একত্রিত করে একটি কীবোর্ডহ্যান্ডলার উপাদান তৈরি করেছি যাতে পাঠ্য ইনপুট উপাদানগুলির সাথে কোনও ভিউ জুড়ে দেওয়া যায়। একটি যাদুমন্ত্র মত কাজ করে! :-)
/**
* 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;
প্রথমে আপনাকে রিএ্যাক্ট-নেটিভ-কীবোর্ডগুলি ইনস্টল করতে হবে ।
তারপরে জাভাস্ক্রিপ্টের জমিতে ফিরে আসুন:
আপনাকে প্রতিক্রিয়া-নেটিভ-কীবোর্ডগুলি আমদানি করতে হবে।
var KeyboardEvents = require('react-native-keyboardevents');
var KeyboardEventEmitter = KeyboardEvents.Emitter;
তারপরে আপনার দৃষ্টিতে কীবোর্ডের জায়গার জন্য কিছু স্টেট যুক্ত করুন এবং কীবোর্ড ইভেন্টগুলি শুনে আপডেট করুন।
getInitialState: function() {
KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, (frames) => {
this.setState({keyboardSpace: frames.end.height});
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, (frames) => {
this.setState({keyboardSpace: 0});
});
return {
keyboardSpace: 0,
};
},
অবশেষে, সমস্ত কিছুর নীচে আপনার রেন্ডার ফাংশনে একটি স্পেসার যুক্ত করুন যাতে এটি আকার বাড়লে এটি আপনার স্টাফকে বাধা দেয়।
<View style={{height: this.state.keyboardSpace}}></View>
অ্যানিমেশন এপিআই ব্যবহার করাও সম্ভব, তবে সরলতার জন্য আমরা কেবল অ্যানিমেশনের পরে সামঞ্জস্য করি।
this.listView.getScrollResponder().scrollTo(rowID * rowHeight); এটি যখন অনফোকাস ইভেন্টটি পায় তখন এটি একটি সারিটির টেক্সটইনপুটটিতে কল করে।
স্থানীয়-কীবোর্ড-সচেতন-স্ক্রোল-প্রতিক্রিয়া প্রতিক্রিয়া আমার জন্য সমস্যার সমাধান করে। গিটহাব-এ-নেটিভ-কীবোর্ড-সচেতন-স্ক্রোল-দর্শনের প্রতিক্রিয়া জানান
এটা চেষ্টা কর:
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>);
}
...
এটা আমার জন্য কাজ করেছে। কীবোর্ড প্রদর্শিত হওয়ার পরে ভিউটি মূলত সঙ্কুচিত হয় এবং যখন লুকানো থাকে তখন আবার বাড়তে থাকে।
শুধু উল্লেখ করতে চেয়েছিলেন, এখন KeyboardAvoidingViewআরএন-তে একটি আছে। কেবল এটি আমদানি করুন এবং আরএন-তে অন্য কোনও মডিউল হিসাবে ব্যবহার করুন।
এখানে আরএন-তে প্রতিশ্রুতিবদ্ধতার লিঙ্কটি রয়েছে:
https://github.com/facebook/react-native/commit/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e
এটি 0.29.0 থেকে উপলব্ধ
তারা ইউআইএক্সপ্লোরার-এর উদাহরণও অন্তর্ভুক্ত করেছে।
হতে পারে দেরীতে, তবে সবচেয়ে ভাল সমাধান হ'ল আইটিকিউইবোর্ডম্যানেজার একটি নেটিভ লাইব্রেরি ব্যবহার করা
ডেমো প্রকল্প থেকে আপনার আইওএস প্রকল্পে আইকিউ কীবোর্ড ম্যানেজার ডিরেক্টরিটি কেবল টানুন এবং ছেড়ে দিন। এটাই. এছাড়াও আপনি কিছু ভ্যালাস সেটআপ করতে পারেন, যেমনটি টুলবার সক্রিয় আছে, বা অ্যাপডেলিগেট.এম ফাইলটিতে পাঠ্য ইনপুট এবং কীবোর্ডের মধ্যে স্থান। কাস্টমাইজেশন সম্পর্কে আরও বিশদটি আমি যোগ করা গিটহাব পৃষ্ঠা লিঙ্কে রয়েছে।
আমি টেক্সটইনপুট.অনফোকস এবং স্ক্রোলভিউ.স্ক্রোলটো ব্যবহার করেছি।
...
<ScrollView ref="scrollView">
...
<TextInput onFocus={this.scrolldown}>
...
scrolldown: function(){
this.refs.scrollView.scrollTo(width*2/3);
},
@ স্টেফেন
কীবোর্ডটি ঠিক একই হারে উচ্চতা অ্যানিমেট না রাখলে আপনি যদি আপত্তি না করেন তবে আপনি কেবল লেআউটএনিমেশন ব্যবহার করতে পারেন, যাতে কমপক্ষে উচ্চতা স্থানে না যায়। যেমন
বিক্রিয়া-নেটিভ থেকে লেআউটএনিমেশন আমদানি করুন এবং আপনার উপাদানগুলিতে নিম্নলিখিত পদ্ধতিগুলি যুক্ত করুন।
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 ref="password" secureTextEntry={true}
onFocus={this.scrolldown.bind(this,'password')}
/>
আমাদের স্ক্রোল ডাউন পদ্ধতিতে এমন কিছু দেখাচ্ছে:
scrolldown(ref) {
const self = this;
this.refs[ref].measure((ox, oy, width, height, px, py) => {
self.refs.scrollView.scrollTo({y: oy - 200});
});
}
এটি আমাদের ফোকাসড ইনপুটটির অবস্থানে নিচে স্ক্রোল করতে আমাদের স্ক্রোল ভিউটিকে (একটি রেফ যুক্ত করতে মনে রাখবেন) বলবে - 200 (এটি প্রায় কীবোর্ডের আকার)
componentWillMount() {
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardWillHide',
this.keyboardDidHide.bind(this)
)
}
componentWillUnmount() {
this.keyboardDidHideListener.remove()
}
keyboardDidHide(e) {
this.refs.scrollView.scrollTo({y: 0});
}
এখানে আমরা আমাদের স্ক্রোল ভিউ শীর্ষে ফিরে রিসেট,
আমি একটি সহজ পদ্ধতি ব্যবহার করছি, তবে এটি এখনও অ্যানিমেটেড নয়। আমার কাছে "বাম্পডআপ" নামে একটি উপাদান রয়েছে যা আমি 0 এ ডিফল্ট হয়েছি, তবে পাঠ্য ইনপুটটি ফোকাস হয়ে গেলে 1 এ সেট করুন:
আমার পাঠ্য ইনপুট:
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]}>সুতরাং, "বাম্পডআপ" অবস্থাটি 1 এ সেট হয়ে গেলে, বাম্পডকন্টেনার স্টাইলটি কিক করে এবং সামগ্রীটিকে উপরে নিয়ে যায়।
কিন্ডা হ্যাকি এবং মার্জিনগুলি হার্ডকোডযুক্ত, তবে এটি কার্যকর হয় :)
আমি আমার স্ক্রোলভিউয়ের নীচে বাড়াতে ব্রাইসগো উত্তর ব্যবহার করি। তারপরে আমি স্ক্রোলভিউয়ের বর্তমান অবস্থান আপডেট করতে অনস্ক্রোলটি ব্যবহার করি। আমি তখন এই প্রতিক্রিয়া নেটিভটি পেয়েছি: টেক্সটিনপুটটির অবস্থান পাওয়ার জন্য কোনও উপাদানটির অবস্থান পাওয়া। আমি তখন ইনপুটটি বর্তমান দর্শনে রয়েছে কিনা তা বের করার জন্য কিছু সাধারণ গণিত করি। তারপরে আমি ন্যূনতম পরিমাণ প্লাস একটি মার্জিন সরাতে স্ক্রোলটো ব্যবহার করি। এটা বেশ মসৃণ। স্ক্রোলিং অংশের জন্য কোডটি এখানে:
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 );
}
);
};
},
আমি এই প্রশ্নটি পূরণ। শেষ পর্যন্ত, আমি প্রতিটি দৃশ্যের উচ্চতা নির্ধারণ করে এটি সমাধান করি:
<Navigator
...
sceneStyle={{height: **}}
/>
এবং, আমি আসল উচ্চতা পেতে একটি তৃতীয় পক্ষের মডিউল https://github.com/jaysoo/react-native-extra-dimension- android ব্যবহার করি ।