reactjs - 如何禁用来自 React Native API 的某些特定项目的可触摸不透明度

Question

我有一个 API，我需要单独设置Touchable Opacity对于每个项目。我已经做到了。但现在我需要禁用一些可触摸的不透明度。就像我想做的是，如果 Api 中的 Status 和 Check 都是 True 那么用户可以移动到下一个及其颜色是红色的。按下那个可触摸的不透明度屏幕，但如果其中之一是false 然后 touchable opacity 将被禁用并且用户无法移动到下一个屏幕并且它的颜色将为灰色我不知道该怎么做因为我对 React-native 中的这种功能非常陌生，所以我阅读了不同的问题和答案，但不幸的是，这对我没有帮助。

API 响应

const results = [
   {
            Id: "IySO9wUrt8",
            Name: "Los Stand",
            Category: "Mexican",
            Status: true,
            Check: true,
        },
    {
            Id: "IySO9wUrt8",
            Name: "Los Stand 2",
            Category: "Burger",
            Status: true,
            Check: true,
        },
     {
            Id: "IySO9wUrt8",
            Name: "Los Stand 3",
            Category: "BBq",
            Status: true,
            Check: true,
        },
      ];

我的完整代码

App.js

import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  SafeAreaView,
} from 'react-native';
import { Card, TextInput, RadioButton } from 'react-native-paper';

const results = [
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand',
    Category: 'Mexican',
    Status: true,
     Check: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 2',
    Category: 'Burger',
    Status: true,
     Check: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 3',
    Category: 'BBq',
    Status: true,
     Check: true,
  },
];

export default function App() {

  const renderItem = ({ item }) => {

    return (
      <>
       <TouchableOpacity
        onPress={() =>
          navigation.navigate('NextScreen', {
            name: item.Name,
            phone: item.Phone,
          })
        }>
        <View
          style={{
            flexDirection: 'column',
            marginHorizontal: 10,
            marginVertical: 10,
            padding: 5,
            backgroundColor: 'grey',
            borderRadius: 15,
          }}>
          
          <View
            style={{
              flexDirection: 'column',
              alignSelf: 'flex-start',
              marginTop: 10,
              marginBottom: 10,
            }}>
            <Text
              style={{
                fontSize: 15,
                fontWeight: '900',
                color: '#424242',
              }}>
              {item.Name}
            </Text>
            <Text>{item.Phone}</Text>
          </View>
        </View>
      </TouchableOpacity>
   
      </>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.container}
        data={results}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: 'white',
  },
});

AssetExample.js

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default function AssetExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Local files and assets can be imported by dragging and dropping them into the editor
      </Text>
      <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 128,
    width: 128,
  }
});

您可以在 Expo Snack 中编辑代码

My Expo code for live editing

Answer 1

TouchableOpacity 有一个 disabled 属性，所以你应该使用它。它将阻止 onPress 执行和导航用户。

关于样式，您可以使用相同的登录查看样式。

<TouchableOpacity disabled={!result.Status || !result.Check} style={{ background: (!result.Status || !result.Check) ? 'grey' : 'red' }}>