TouchableOpacity не работает внутри ScrollView

Question

Я пытаюсь реализовать Окно предложений для текстового поля. При вводе ввода поле предложения должно появиться чуть ниже текущего текстового поля и над следующим полем ввода. Это предложение должно прокручиваться после maxHeight. Я реализовал все, только Touchable не работает внутри ScrollView , если я заменю ScrollView простым View Touchable Works, но контейнер, конечно, не будет прокручиваться.

Как с этим бороться?

import React from 'react';
import {
  View,
  StatusBar,
  ScrollView,
  TextInput,
  Text,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
const TestScreen = () => {
  const [val, setVal] = React.useState('');
  const [show, setShow] = React.useState(false);
  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <TextInput
          placeholder="Text"
          value={val}
          style={{zIndex: 1}}
          onFocus={() => setShow(true)}
          onBlur={() => setShow(false)}
          onChangeText={t => {
            setShow(true);
            setVal(t);
          }}
        />
        <TextInput placeholder="Text" value={val} style={{zIndex: 1}} />
        {show && (
          <View style={{position: 'absolute', top: 50}}>
            <ScrollView
              style={{
                elevation: 5,
                zIndex: 5,
                backgroundColor: 'white',
                width: 100,
                maxHeight: 50,
              }}>
              <TouchableOpacity onPress={() => setVal('Item1')}>
                <Text>Item1</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setVal('Item2')}>
                <Text>Item2</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setVal('Item3')}>
                <Text>Item3</Text>
              </TouchableOpacity>
            </ScrollView>
          </View>
        )}
      </SafeAreaView>
    </>
  );
};

export default TestScreen;

Пожалуйста, дайте мне знать, где я ошибаюсь.

Answer 1

Итак, если вы ищете ответ на эту проблему. Просто удалите свойства функции onBlur из компонента TextField. Здесь вы go, у вас есть собственное поле для предложения настраиваемого текстового поля.

Вот код решения, которое помогло это сделать. Я до сих пор не знаю, что это лучшая идея, но, по крайней мере, у меня она сработала.

import React from 'react';
import {
  View,
  StatusBar,
  ScrollView,
  TextInput,
  Text,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {Button} from 'native-base';
const TestScreen = () => {
  const [val, setVal] = React.useState('');
  const [show, setShow] = React.useState(false);
  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <TouchableOpacity
          style={{flex: 1}}
          activeOpacity={1}
          onPress={() => {
            if (show) {
              setShow(false);
            }
          }}>
          <TextInput
            placeholder="Text"
            value={val}
            style={{zIndex: 1}}
            onFocus={() => setShow(true)}
            onChangeText={t => {
              setShow(true);
              setVal(t);
            }}
          />
          <TextInput placeholder="Text" value={val} style={{zIndex: 1}} />
          {show && (
            <View
              style={{
                position: 'absolute',
                top: 50,
              }}>
              <ScrollView
                style={{
                  elevation: 5,
                  zIndex: 5,
                  backgroundColor: 'white',
                  width: 100,
                  maxHeight: 50,
                }}>
                <TouchableOpacity
                  onPress={() => {
                    setShow(false);
                    setVal('Item1');
                  }}>
                  <Text>Item1</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item2')}>
                  <Text>Item2</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item3')}>
                  <Text>Item3</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item4')}>
                  <Text>Item4</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item5')}>
                  <Text>Item5</Text>
                </TouchableOpacity>
              </ScrollView>
            </View>
          )}
        </TouchableOpacity>
      </SafeAreaView>
    </>
  );
};

export default TestScreen;