React Native заставляет клавиатуру отклонять фокус при нажатии кнопки на клавиатуре AvoidView - PullRequest
Новая
       17

React Native заставляет клавиатуру отклонять фокус при нажатии кнопки на клавиатуре AvoidView

0 голосов
/ 12 января 2019

Я создаю реагирующее нативное приложение, чтобы узнать, как использовать реагирующее нативное приложение. Я в основном следовал этому уроку: YouTube при создании интерфейса ввода текста. Моя проблема в том, что у меня есть кнопка рядом со входом. У меня также есть эти два компонента, вложенные в клавиатуру, избегая просмотра. Когда я нажимаю «Отправить» на клавиатуре, я очищаю ввод текста и хочу снять фокусировку с ввода. Он работает, когда я нажимаю кнопку отправки на клавиатуре, но когда я нажимаю кнопку реагировать на встроенную функцию, которая находится рядом со входом в приложении, она проходит через функцию отправки сообщения и затем снова фокусирует ввод. 

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  View,
  Text,
  KeyboardAvoidingView,
  FlatList,
  TextInput,
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  Keyboard
} from 'react-native';

import { Ionicons } from '@expo/vector-icons';



import colors from '../../styles/styles';


const INPUT_HEIGHT = 65

class HomeScreen extends React.Component {


  state = {
    message : ""
  }

  onMessageSend = () => {
    alert(this.state.message);
    this.setState({
      message : ''
    });
    Keyboard.dismiss()
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
          <View style = {styles.messages}>
            <Text>Messages</Text>
          </View>
          <KeyboardAvoidingView
          behavior = 'padding'
          //keyboardVerticalOffset = {INPUT_HEIGHT}
          enabled
          >
          <ScrollView
          keyboardShouldPersistTaps = "handled"
          >
          <View style = {styles.input}>
              <View style = {styles.inputWrapper}>
                <TextInput
                style = {styles.textInput}
                ref={ref => (this._input = ref)}
                placeholder = "Message"
                returnKeyType = "send"
                value = {this.state.message}
                onChangeText = {(text) => {this.setState({message : text})}}
                onSubmitEditing = {this.onMessageSend}
                />
              </View>
              <TouchableOpacity onPress = {this.onMessageSend}>
              <Ionicons name="ios-send" size={32} color="black" />
              </TouchableOpacity>
          </View>
          </ScrollView>
          </KeyboardAvoidingView>


      </SafeAreaView>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  messages : {
    flex : 1,
    backgroundColor : colors.green,
  },
  textInput : {
    flex : 1
  },
  input : {
    height: 65,
    backgroundColor : "#fefefe",
    bottom : 0,
    right : 0,
    left : 0,
    flexDirection : 'row',
    alignItems : 'center',
    justifyContent : 'space-around',
    borderTopWidth : StyleSheet.hairlineWidth,
    borderColor : "#C1C9D3"
  },
  inputWrapper : {
    backgroundColor : "#fff",
    width: "85%",
    height: "65%",
    borderRadius : 25,
    borderWidth : StyleSheet.hairlineWidth,
    borderColor : "#C1C9D3",
    paddingHorizontal : 16,
  }
});



export default HomeScreen;

Я ожидал, что произойдет размытие ввода, когда я нажму кнопку с пиктограммой, и останусь не сфокусированным, но на самом деле произошло то, что ввод не сфокусирован, предупредит пользователя, а затем перефокусируется.

Как сделать так, чтобы вход полностью не фокусировался при нажатии кнопки «Отправить» на клавиатуре и кнопки с пиктограммой в реальном приложении, или, что еще лучше, при фокусировке при нажатии в любом месте, кроме клавиатуры?

...