Як автоматично висунути вікно ззаду клавіатури, коли TextInput має фокус?

Я бачив цей хак для власних додатків для автоматичного прокручування вікна, але цікаво, як це зробити найкраще у React Native ... Коли <TextInput>поле фокусується і розташоване низько у поданні, клавіатура закриє текстове поле.

Ви можете побачити цю проблему в прикладі подання UIExplorer 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параметром, щоб відповідати потребам вашого конкретного дизайну інтерфейсу.

Facebook вирішив цю проблему у відкритому коді KeyboardAvoidingView 0.29 для реагування. Документацію та приклад використання можна знайти тут .

Ми об’єднали частину форми коду response-native-keyboard-spacer та код із @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;

Спочатку потрібно встановити response-native-keyboardevents .

1. У XCode, у навігаторі проекту, клацніть правою кнопкою миші Бібліотеки ➜ Додати файли до [імені вашого проекту] Перейдіть до node_modules ➜ response-native-keyboardevents і додайте файл .xcodeproj
2. У XCode у навігаторі проекту виберіть свій проект. Додайте lib * .a з проекту keyboardevents до фаз побудови вашого проекту ➜ Пов’яжіть двійковий файл з бібліотеками Клацніть файл .xcodeproj, який ви раніше додали, у навігаторі проекту та перейдіть на вкладку Параметри побудови. Переконайтесь, що ввімкнено «Все» (замість «Основне»). Шукайте шляхи пошуку заголовка та переконайтесь, що вони містять як $ (SRCROOT) /../ response-native / React, так і $ (SRCROOT) /../../ React - позначте обидва як рекурсивні.
3. Запустіть свій проект (Cmd + R)

Потім повернімося в javascript land:

Вам потрібно імпортувати response-native-keyboardevents.

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>

Також можна використовувати анімаційний api, але для простоти ми просто налаштовуємось після анімації.

Реакція-рідна-клавіатура-обізнана-прокрутка-перегляд вирішила проблему для мене. переглянути-рідну-клавіатуру-обізнану-прокрутку-перегляд на GitHub

Спробуйте це:

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>);
}

...

У мене це спрацювало. Вигляд в основному зменшується, коли клавіатура відображається, і знову відростає, коли її приховують.

Тільки хотів згадати, зараз є KeyboardAvoidingViewRN. Просто імпортуйте його та використовуйте як будь-який інший модуль у RN.

Ось посилання на коміт на RN:

https://github.com/facebook/react-native/commit/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e

Він доступний з 0.29.0

Вони також включили приклад на UIExplorer.

Можливо, це пізно, але найкращим рішенням є використання власної бібліотеки IQKeyboardManager

Просто перетягніть каталог IQKeyboardManager з демонстраційного проекту на ваш проект iOS. Це воно. Також ви можете налаштувати деякий валус, як увімкнено isToolbar, або простір між введенням тексту та клавіатурою у файлі AppDelegate.m. Детальніше про налаштування див. У посиланні на сторінку GitHub, яке я додав.

Я використовував TextInput.onFocus та ScrollView.scrollTo.

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

@Stephen

Якщо ви не проти, щоб анімація висоти не була точно такою ж, як і на клавіатурі, ви можете просто скористатися LayoutAnimation, щоб принаймні висота не встала на місце. напр

імпортуйте LayoutAnimation із реакції-native та додайте наступні методи до свого компонента.

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,
      },
    },
  },
};

ОНОВЛЕННЯ:

Дивіться відповідь @ sherlock нижче, станом на 0,11, реагуючи на рідну реакцію, розмір клавіатури можна вирішити за допомогою вбудованої функціональності.

Ви можете поєднати кілька методів у щось дещо простіше.

Приєднайте слухач onFocus до своїх входів

<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});
}

Тут ми скидаємо наш вид прокрутки назад до початку,

Я використовую простіший метод, але він ще не анімований. У мене є стан компонента під назвою "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 вмикається і переміщує вміст вгору.

Напевно хакі і поля чітко закодовані, але це працює :)

Я використовую brysgo відповідь, щоб підняти нижню частину свого перегляду прокрутки. Потім я використовую onScroll для оновлення поточної позиції перегляду прокрутки. Потім я знайшов цей React Native: Отримання позиції елемента для отримання позиції вводу тексту. Потім я роблю просту математику, щоб з’ясувати, чи вводиться дані в поточному поданні. Потім я використовую scrollTo для переміщення мінімальної суми плюс поля. Це досить гладко. Ось код для частини прокрутки:

            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-dimensions-android, щоб отримати реальну висоту.