Блог

Я работаю над приложением в React Native, где у меня есть автозаполнение в заголовке, это какой-то псевдокод:

 useLayoutEffect(() => {
    navigation.setOptions({
      ....,
      headerTitle: () => (
        <View style={styles.searchBox}>
          <Autocomplete .../>
        </View>
      ),
    });
  }, []);
 

это компонент автозаполнения:

 <View>
  <View>
    {showNativeModule ? (
      <TextInput ... />
    ) : (
      <GooglePlacesAutocomplete ... />
    )}
  </View>

  {(showNativeModule amp;amp; locations.length) > 0 ? (
    <View>
      {locations.map((location) => (
        <TouchableOpacity>
            <Text>{location.fullText}</Text>
        </TouchableOpacity>
      ))}
    </View>
  ) : null}
</View>

 

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