我正在尝试为文本字段实现建议框。输入输入时,建议框应显示在当前文本字段下方和下一个输入字段上方,此建议应在 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;
请让我知道我错在哪里。