React Native - TextInput в заголовке - клавиатура постоянно отключается каждый раз, когда я ввожу новый символ

Question

код отлично работает в веб-браузере, но на ipad или iphone каждый раз, когда я ввожу символ в текстовый ввод, клавиатура отключается. Однако, когда я использую этот ввод текста с теми же настройками на экране вместо заголовка, он отлично работает, не закрываясь, пока я не нажму за пределами клавиатуры.

вот код для заголовка поиска. этот компонент является заголовком вкладки поиска

import React, {Component} from 'react';
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
import {search} from './SearchFunctionality.js'

export default class SearchHeader extends Component {
   constructor(props){
       super(props)
       this.state={
           value: ''
       }      
   }

submitButtonHandler = () => {
    search(this.state.value)
}

render(){
     return (
    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
    <Image
    style={{ width: 50, height: 50 }}
    source={{uri: 'https://vignette.wikia.nocookie.net/youtube/images/a/a5/Kittisaurus.jpeg/revision/latest/zoom-crop/width/360/height/360?cb=20200102062324'}}
    />
    <TextInput type = "search" name = 'SearchBar' onChangeText= {(searchValue) => this.setState({value:searchValue})}
      placeholder = 'SEARCH'
      style={{ paddingLeft: 5, paddingRight: 5, width: 150, height: 40, borderColor: 'green', borderWidth: 3 }}
    />
    <TouchableOpacity style = {{height: 40, width: 70, justifyContent: 'center',  alignItems: "center", backgroundColor: 'green'}} onPress = {this.submitButtonHandler}>
        <Text>find</Text>
    </TouchableOpacity>
    </View>

  );}
}

Answer 1

Я не думаю, что TextInput получает значение из состояния и перезаписывает свое собственное значение. Попробуйте присвоить TextInput значение this.state.value:

<TextInput 
type="search" 
name='SearchBar'
value={this.state.value}
onChangeText= {(searchValue) => this.setState({value:searchValue})}
placeholder = 'SEARCH'
style={{ paddingLeft: 5, paddingRight: 5, width: 150, height: 40, borderColor: 'green', borderWidth: 3 }}
    />