Как установить поле ввода текста над клавиатурой при вводе поля ввода в реагировать родной - PullRequest
Новая
       39

Как установить поле ввода текста над клавиатурой при вводе поля ввода в реагировать родной

0 голосов
/ 06 февраля 2019

Я использую активный компонент TextInput.Здесь мне нужно показать InputBox над клавиатурой, если пользователь нажимает на поле textInput.

Я пробовал ниже, но я сталкиваюсь с проблемами

1.Клавиатура, избегающая обзора 

 a. Here it shows some empty space below the input box 
 b. Manually I need to scroll up the screen to see the input field which I was given in the text field
 c. Input box section is hiding while placing the mouse inside the input box

2.response-native-Keyboard-aware-scroll-view 

a.It shows some empty space below the input box
b.ScrollView is reset to the top of the page after I moving to the next input box

Здесь я устанавливаю Keyboard-aware-scroll-view внутри компонента ScrollView

Просьба уточнить

Мой пример кода: 

<SafeAreaView>
<KeyboardAvoidingView>
<ScrollView>        
        <Text>Name</Text>
            <AutoTags
            //required
             suggestions={this.state.suggestedName}
             handleAddition={this.handleAddition}
             handleDelete={this.handleDelete}
             multiline={true}
             placeholder="TYPE IN"
             blurOnSubmit={true}
             style= {styles.style}
             />
</ScrollView>   
</KeyboardAvoidingView>
</SafeAreaView>

[https://github.com/APSL/react-native-keyboard-aware-scroll-view]

Ответы [ 5 ]

0 голосов
/ 22 июня 2019

Вы определенно найдете это полезным из

Вид с прокруткой с поддержкой клавиатуры. Android проблема

Я действительно не знаю, почему вы должны добавить

"androidStatusBar": {"backgroundColor": "# 000000"}

для работы KeyboardawareScrollview

Примечание : don 'не забудьте перезапустить проект без последнего шага, он может не работать, наслаждайтесь!

0 голосов
/ 05 марта 2019

Вы можете использовать KeyboardAvoidingView следующим образом 

if (Platform.OS === 'ios') {
        return <KeyboardAvoidingView behavior="padding">
            {this.renderChatInputSection()}
        </KeyboardAvoidingView>
    } else {
        return this.renderChatInputSection()
    }

Где this.renderChatInputSection() вернет представление, подобное вводу текста для ввода сообщения.Надеюсь, это поможет вам.

0 голосов
/ 03 марта 2019

Дайте вашему TextInput позицию: абсолютную стилизацию и измените ее позицию, используя высоту, возвращаемую событиями keyboardDidShow и keyboardDidHide.

Вот модификация примера клавиатуры из документации React Native для демонстрации: 

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

class Example extends Component {
    state = {
        keyboardOffset: 0,
    };

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener(
            'keyboardDidShow',
            this._keyboardDidShow,
        );
        this.keyboardDidHideListener = Keyboard.addListener(
            'keyboardDidHide',
            this._keyboardDidHide,
        );
    }

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

    _keyboardDidShow(event) {
        this.setState({
            keyboardOffset: event.endCoordinates.height,
        })
    }

    _keyboardDidHide() {
        this.setState({
            keyboardOffset: 0,
        })
    }

    render() {
        return <View style={{flex: 1}}>
            <TextInput
                style={{
                    position: 'absolute',
                    width:    '100%',
                    bottom:   this.state.keyboardOffset,
                }}
                onSubmitEditing={Keyboard.dismiss}
            />
        </View>;
    }
}
0 голосов
/ 05 марта 2019

реакция-нативная клавиатура-осведомленная прокрутка-просмотр вызывает аналогичную проблему в ios.Вот когда я наткнулся на реагировать на родную клавиатуру-осведомленный вид .Фрагменты практически одинаковы.

    <KeyboardAwareView animated={true}>
        <View style={{flex: 1}}>
          <ScrollView style={{flex: 1}}>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>A</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>B</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>C</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>D</Text>
          </ScrollView>
        </View>
        <TouchableOpacity style={{height: 50, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch'}}>
          <Text style={{fontSize: 20, color: '#FFFFFF'}}>Submit</Text>
        </TouchableOpacity>
      </KeyboardAwareView>

Надеюсь, что hepls

0 голосов
/ 27 февраля 2019

Для Android вы можете установить android:windowSoftInputMode="adjustResize" для Activity в AndroidManifest файле, таким образом, когда клавиатура отобразится, ваш размер изменит размер, и если вы поместите TextInput внизу экрана, он будет сохранен.над клавиатурой

...