React Native中如何禁用API返回特定项的Touchable Opacity

核心逻辑 #

先根据API返回的Status和Check字段计算可点击状态：

const isEnabled = item.Status && item.Check;

基于这个变量，即可控制TouchableOpacity的禁用状态、背景色和跳转逻辑。

完整代码示例 #

假设你用FlatList渲染列表，修改renderItem部分如下：

import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
// 若使用React Navigation跳转，需引入useNavigation
// import { useNavigation } from '@react-navigation/native';

export default function App() {
  // 模拟API返回的数据结构
  const apiData = [
    { id: 1, Status: true, Check: true, title: "可点击跳转项" },
    { id: 2, Status: true, Check: false, title: "禁用项（Check为false）" },
    { id: 3, Status: false, Check: true, title: "禁用项（Status为false）" },
  ];

  // const navigation = useNavigation(); // 启用这行以使用React Navigation跳转

  return (
    <View style={styles.container}>
      <FlatList
        data={apiData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => {
          const isEnabled = item.Status && item.Check;
          return (
            <TouchableOpacity
              // 控制禁用状态：isEnabled为false时禁用按钮
              disabled={!isEnabled}
              // 动态设置背景色
              style={[
                styles.touchableItem,
                { backgroundColor: isEnabled ? 'red' : 'gray' }
              ]}
              // 点击事件：仅当可点击时执行跳转逻辑
              onPress={() => {
                if (isEnabled) {
                  // 替换为你的跳转逻辑，比如：
                  // navigation.navigate('目标页面名称');
                  console.log('跳转至下一页面');
                }
              }}
            >
              <Text style={styles.itemText}>{item.title}</Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    marginTop: 40,
  },
  touchableItem: {
    padding: 18,
    marginVertical: 10,
    borderRadius: 8,
    alignItems: 'center',
  },
  itemText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});

关键细节说明 #

1. 禁用控制：disabled={!isEnabled}会让TouchableOpacity在不可点击时失去触摸响应，系统还会自动降低按钮透明度（可自定义调整）。
2. 动态样式：通过样式数组合并基础样式和条件样式，确保背景色随状态实时变化。
3. 跳转防护：即使TouchableOpacity被禁用，在onPress里再加一层isEnabled判断，能避免极端情况下的意外跳转触发。
4. 数据类型校验：如果API返回的Status/Check是字符串格式（比如"true"），需要先转换为布尔值：const isEnabled = Boolean(item.Status) && Boolean(item.Check);

内容的提问来源于stack exchange，提问作者Muhammd Abdullah