FlatList 中的可触摸不透明度不响应触摸答案

【问题标题】：Touchable Opacity in FlatList doesn't respond to touchFlatList 中的可触摸不透明度不响应触摸
【发布时间】：2022-08-14 17:45:10
【问题描述】：

我正在使用提供的 FlatList 显示下面的状态数组。但是，Key 中的 TouchableOpacity 元素对按下没有任何响应。即使我将 TO 更改为按钮或可按下的，问题仍然存在。有没有人有这个问题的解决方案，因为即使使用非常相似的代码，它也从未发生过。

const [keyboard, setKeyboard] = useState([
        {char: \'a\', background: \'white\', border: \'black\', text: \'black\'},
                                   .
                                   .
                                   .
        {char: \'z\', background: \'white\', border: \'black\', text: \'black\'},
    ]);

const Key = ({letter, background, border, textColor}) => {
        return(
            <TouchableOpacity style = {[styles.key, {backgroundColor: {background}}, {borderColor: {border}}]} onPress = {() => console.log({letter})}>
                <Text style = {[styles.letter, {color: {textColor}}]}>{letter}</Text>
            </TouchableOpacity>
        );
    };

<FlatList 
            contentContainerStyle = {styles.keyboard}
            data={keyboard}
            renderItem= {({item}) => <Key letter={item.char} background={item.background} border={item.border} textColor={item.text}/>}
            keyExtractor={(item) => item.char}
            numColumns = {6}
        />

款式：

keyboard:{
    width: \'100%\',
    height: \'40%\',
    alignItems: \'center\',
    justifyContent: \'center\',
    position: \'absolute\',
    transform:[{translateY: 420}],
    flex: 1,
 },
 letter:{
    fontSize: 25,
    fontWeight: \'bold\',
    position: \'absolute\',

 },
 key:{
    height: 50,
    width: 60,
    borderWidth: 3,
    borderRadius: 10,
    alignItems: \'center\',
    justifyContent: \'center\',

 },

标签： react-native react-hooks react-native-flatlist touchableopacity

【解决方案1】：

代码工作正常，样式的问题是您将其作为对象传递

 {background:{background}} instead this use {background:background}

这是我测试过的expo的链接 see here its working with styling and also touchable

希望它对你有帮助

【讨论】：

这已经解决了道具的问题，但是 TouchableOpacity 不响应触摸的问题仍然存在。
我试图在 FlatList 之外添加一个可触摸的不透明度和一个按钮作为测试元素，即使这些都不起作用，所以问题不在于 FlatList。
它在触摸时响应，您可以使用 console.log 或 onpress 事件上的警报来检查它，如果我不理解您的问题，请纠正我。
Z 和 X 按钮似乎不起作用。这是因为样式而出现的问题吗？

【解决方案2】：

这段代码的问题是我打开了一个模态。当 Modal 打开时，TouchableOpacity 组件似乎没有响应触摸。而是使用有条件渲染的视图。

{  {CONDITION HERE} ?(
       {WHAT WILL BE RENDERED IF CONDITION IS SATISFIED HERE}
):  {WHAT WILL BE RENDERED IF CONDITION IS NOT SATISFIED HERE; null or some other component}}

【讨论】：