TouchableOpacity 在 ScrollView 中不起作用答案

【问题标题】：TouchableOpacity is not working inside ScrollViewTouchableOpacity 在 ScrollView 中不起作用
【发布时间】：2020-05-28 20:32:21
【问题描述】：

我正在尝试为文本字段实现建议框。输入输入时，建议框应显示在当前文本字段下方和下一个输入字段上方，此建议应在 maxHeight 之后滚动。我已经实现了一切，只是 Touchable 在 ScrollView 内不起作用，如果我用简单的 View Touchable Works 替换 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;

请让我知道我错在哪里。

【问题讨论】：

标签： react-native scrollview react-native-android react-native-flatlist react-native-paper

【解决方案1】：

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

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

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;

【讨论】：