Tôi đã thấy bản hack này cho các ứng dụng gốc để tự động cuộn cửa sổ, nhưng đang băn khoăn không biết cách tốt nhất để thực hiện điều đó trong React Native ... Khi một <TextInput>trường được lấy nét và nằm ở vị trí thấp trong chế độ xem, bàn phím sẽ che trường văn bản.
Bạn có thể thấy vấn đề này trong ví dụ của UIExplorer's TextInputExample.jsview.
Có ai có một giải pháp tốt?
Câu trả lời:
Câu trả lời năm 2017
Có KeyboardAvoidingViewlẽ là cách tốt nhất để đi bây giờ. Kiểm tra các tài liệu ở đây . Nó thực sự đơn giản so với Keyboardmô-đun cho phép Nhà phát triển kiểm soát nhiều hơn để thực hiện các hoạt ảnh. Spencer Carli đã trình bày tất cả các cách có thể trên blog phương tiện của mình .
Câu trả lời năm 2015
Cách chính xác để làm điều này là react-nativekhông yêu cầu thư viện bên ngoài, tận dụng mã gốc và bao gồm các hình ảnh động.
Trước tiên, hãy xác định một hàm sẽ xử lý onFocussự kiện cho từng TextInput(hoặc bất kỳ thành phần nào khác mà bạn muốn cuộn đến):
// 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);
}Sau đó, trong chức năng kết xuất của bạn:
render () {
return (
<ScrollView ref='scrollView'>
<TextInput ref='username'
onFocus={this.inputFocused.bind(this, 'username')}
</ScrollView>
)
}Điều này sử dụng RCTDeviceEventEmittercho các sự kiện bàn phím và định cỡ, đo vị trí của thành phần đang sử dụng RCTUIManager.measureLayoutvà tính toán chuyển động cuộn chính xác cần thiết scrollResponderInputMeasureAndScrollToKeyboard.
Bạn có thể muốn thử với additionalOffsettham số để phù hợp với nhu cầu của thiết kế giao diện người dùng cụ thể của bạn.
import {findNodeHandle} from 'react-native' stackoverflow.com/questions/37626851/...
Facebook mở nguồn gốc KeyboardAvoidingView trong react native 0.29 để giải quyết vấn đề này. Tài liệu và ví dụ sử dụng có thể được tìm thấy ở đây .
DeviceEventEmitter.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
Chúng tôi đã kết hợp một số dạng mã react-native-keyboard-spacer và mã từ @Sherlock để tạo thành phần KeyboardHandler có thể được bao quanh bất kỳ Chế độ xem nào có phần tử TextInput. Hoạt động như một sự quyến rũ! :-)
/**
* 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;Trước tiên, bạn cần cài đặt react-native-keyboardevents .
Sau đó trở lại vùng đất javascript:
Bạn cần nhập các phản ứng-gốc-bàn phím.
var KeyboardEvents = require('react-native-keyboardevents');
var KeyboardEventEmitter = KeyboardEvents.Emitter;Sau đó, trong chế độ xem của bạn, hãy thêm một số trạng thái cho không gian bàn phím và cập nhật từ việc nghe các sự kiện bàn phím.
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,
};
},Cuối cùng, thêm một miếng đệm vào chức năng kết xuất của bạn bên dưới mọi thứ để khi nó tăng kích thước, nó sẽ đẩy nội dung của bạn lên.
<View style={{height: this.state.keyboardSpace}}></View>Cũng có thể sử dụng api hoạt ảnh, nhưng để đơn giản hơn, chúng tôi chỉ điều chỉnh sau hoạt ảnh.
this.listView.getScrollResponder().scrollTo(rowID * rowHeight); Điều này được gọi trên TextInput của một hàng khi nó nhận được sự kiện onFocus.
phản ứng-bản địa-bàn phím-nhận thức-cuộn-xem đã giải quyết vấn đề cho tôi. phản ứng-bản địa-bàn phím-nhận biết-cuộn-xem trên GitHub
Thử cái này:
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>);
}...
Nó đã làm việc cho tôi. Về cơ bản, chế độ xem sẽ thu hẹp lại khi bàn phím được hiển thị và phát triển trở lại khi bị ẩn.
Chỉ muốn đề cập, bây giờ có một KeyboardAvoidingViewtrong RN. Chỉ cần nhập nó và sử dụng nó như bất kỳ mô-đun nào khác trong RN.
Đây là liên kết đến cam kết trên RN:
https://github.com/facebook/react-native/commit/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e
Nó có sẵn từ 0.29.0
Họ cũng đã bao gồm một ví dụ trên UIExplorer.
Có thể là muộn, nhưng giải pháp tốt nhất là sử dụng thư viện gốc, IQKeyboardManager
Chỉ cần kéo và thả thư mục IQKeyboardManager từ dự án demo sang dự án iOS của bạn. Đó là nó. Ngoài ra, bạn có thể thiết lập một số valus, như isToolbar được bật hoặc khoảng cách giữa nhập văn bản và bàn phím trong tệp AppDelegate.m. Thông tin chi tiết về tùy chỉnh có trong liên kết trang GitHub mà tôi đã thêm.
Tôi đã sử dụng TextInput.onFocus và ScrollView.scrollTo.
...
<ScrollView ref="scrollView">
...
<TextInput onFocus={this.scrolldown}>
...
scrolldown: function(){
this.refs.scrollView.scrollTo(width*2/3);
},@Stephen
Nếu bạn không bận tâm về việc chiều cao hoạt ảnh với tỷ lệ chính xác như bàn phím xuất hiện, bạn chỉ có thể sử dụng LayoutAnimation, để ít nhất chiều cao không nhảy vào vị trí. ví dụ
nhập LayoutAnimation từ react-native và thêm các phương thức sau vào thành phần của bạn.
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);
},Một số hoạt ảnh ví dụ là (tôi đang sử dụng hình ảnh mùa xuân ở trên):
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,
},
},
},
};CẬP NHẬT:
Xem câu trả lời của @ sherlock bên dưới, kể từ react-native 0.11, việc thay đổi kích thước bàn phím có thể được giải quyết bằng cách sử dụng chức năng tích hợp sẵn.
Bạn có thể kết hợp một số phương pháp thành một cái gì đó đơn giản hơn một chút.
Đính kèm trình nghe onFocus trên đầu vào của bạn
<TextInput ref="password" secureTextEntry={true}
onFocus={this.scrolldown.bind(this,'password')}
/>Phương thức cuộn xuống của chúng tôi trông giống như sau:
scrolldown(ref) {
const self = this;
this.refs[ref].measure((ox, oy, width, height, px, py) => {
self.refs.scrollView.scrollTo({y: oy - 200});
});
}Điều này cho biết chế độ xem cuộn của chúng tôi (hãy nhớ thêm một số tham chiếu) để cuộn xuống vị trí của đầu vào được tập trung của chúng tôi - 200 (nó gần bằng kích thước của bàn phím)
componentWillMount() {
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardWillHide',
this.keyboardDidHide.bind(this)
)
}
componentWillUnmount() {
this.keyboardDidHideListener.remove()
}
keyboardDidHide(e) {
this.refs.scrollView.scrollTo({y: 0});
}Ở đây chúng tôi đặt lại chế độ xem cuộn của chúng tôi trở lại đầu trang,
Tôi đang sử dụng một phương pháp đơn giản hơn, nhưng nó chưa hoạt hình. Tôi có một trạng thái thành phần được gọi là "colledUp" mà tôi mặc định là 0, nhưng được đặt thành 1 khi textInput được lấy nét, như sau:
Trên textInput của tôi:
onFocus={() => this.setState({bumpedUp: 1})}
onEndEditing={() => this.setState({bumpedUp: 0})}Tôi cũng có kiểu cung cấp cho vùng chứa bao gồm mọi thứ trên màn hình đó một lề dưới và lề trên âm, như thế này:
mythingscontainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
},
bumpedcontainer: {
marginBottom: 210,
marginTop: -210,
},Và sau đó trên thùng chứa, tôi đặt các kiểu như thế này:
<View style={[styles.mythingscontainer, this.state.bumpedUp && styles.bumpedcontainer]}>Vì vậy, khi trạng thái "va chạm" được đặt thành 1, kiểu người quản lý vùng đệm sẽ bắt đầu và di chuyển nội dung lên.
Kinda hacky và các lợi nhuận được mã hóa cứng, nhưng nó hoạt động :)
Tôi sử dụng câu trả lời brysgo để nâng cao cuối màn hình cuộn của tôi. Sau đó, tôi sử dụng onScroll để cập nhật vị trí hiện tại của chế độ xem cuộn. Sau đó, tôi tìm thấy React Native này: Lấy vị trí của một phần tử để lấy vị trí của textinput. Sau đó, tôi thực hiện một số phép toán đơn giản để tìm xem đầu vào có ở chế độ xem hiện tại hay không. Sau đó, tôi sử dụng scrollTo để chuyển số tiền tối thiểu cộng với một khoản tiền ký quỹ. Nó khá trơn tru. Đây là mã cho phần cuộn:
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 );
}
);
};
},Tôi cũng gặp câu hỏi này. Cuối cùng, tôi giải quyết nó bằng cách xác định chiều cao của mỗi cảnh, chẳng hạn như:
<Navigator
...
sceneStyle={{height: **}}
/>Và, tôi cũng sử dụng một mô-đun của bên thứ ba https://github.com/jaysoo/react-native-extra-dimensions-android để có được chiều cao thực sự.