TouchableOpacity unclickable gdy TextInput ma fokus

Question

Mam zaimplementowany pasek wyszukiwania, w tym TextInput i przycisk wyszukiwania. Pomysł polega na wpisaniu tego, co chcesz wyszukać, i naciśnięciu przycisku wyszukiwania. Mój problem polega na tym, że przycisk jest niemożliwy do skasowania, gdy TextInput ma fokus. Co oznacza, że ​​muszę kliknąć dwa razy, aby wyszukać, raz, aby TextInput stracił fokus i raz, aby nacisnąć przycisk wyszukiwania.

Oto mój kod:

<View style={styles.searchView}> 
    <View style={styles.textInputView}> 
     <View> 
      <TextInput style={styles.textInput} 
         placeholder="Sök användare" 
         multiline={false} 
         autoFocus={true} 
         autoCapitalize="words" 
         underlineColorAndroid="transparent" /> 
     </View> 
    </View> 
    <TouchableOpacity> 
     <View style={styles.searchButton}> 
      <Image style = {styles.searchThumbnail} 
         source = {require('../images/navigatorThumbnails/search.png')}/> 
     </View> 
    </TouchableOpacity> 
</View> 

Czy istnieje jakiś sposób, aby klikalny TouchableOpacity natomiast TextInput ma skupić?

Answer 1

Istnieje właściwość o nazwie keyboardShouldPersistTaps w widoku przewijania (a także widoku listy).

Dla React-Native wersji> = 0,41

Dokumentacja mówi:

Określa gdy klawiatura powinny pozostać widoczne po kranu.

• „nigdy” (ustawienie domyślne), stukając zewnątrz zogniskowanego wprowadzania tekstu, gdy klawiatura jest się oddala klawiaturę. Gdy tak się stanie, dzieci nie otrzymają kranu.

• „zawsze”, klawiatura nie odwołuje się automatycznie, a widok przewijania nie złapie krany, ale dzieci z widoku przewijania może złapać krany.

• 'obsłużona', klawiatura nie zostanie odrzucona automatycznie, gdy kran był obsługiwany przez dzieci (lub przechwycony przez przodka).

Ustaw go always lub handled mieć oczekiwanego zachowania.

archiwalna wersja dla React-Native < 0,41

Dokumentacja mówi:

Kiedy fałszywy, stukając poza skupionej wprowadzania tekstu, gdy klawiatura jest się oddala klawiaturę. W przypadku wartości true widok przewijania nie będzie przechwytywał kliknięć, a klawiatura nie zostanie automatycznie odrzucona. Wartością domyślną jest false.

Ustaw na true, aby uzyskać oczekiwane zachowanie. Być może będziesz musiał ustawić ten rekwizyt w różnych miejscach w drzewie komponentów.