TouchableOpacity在ScrollView中不起作用

Question

我正在尝试为文本字段实现一个建议框。输入输入内容时，建议框应出现在当前文本字段的下方，并在下一个输入字段上方，该建议应在maxHeight之后滚动。如果我用简单的View Touchable Works替换了ScrollView，但是容器当然不会滚动，我已经实现了Touchable在ScrollView内不起作用的所有功能。

如何处理？

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

因此，如果您正在寻找此问题的答案。只需从TextField组件中删除onBlur函数props。在这里，您有自己的自定义文本字段建议框。

这里是解决方案代码，有助于完成此任务。我仍然不知道这是最好的主意，但它至少对我有用。

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;