Как отключить сенсорную непрозрачность для определенного элемента, который поступает из API в React Native

У меня есть API, и мне нужно установить Touchable Opacity отдельно для каждого элемента. Я уже сделал это. но теперь мне нужно отключить некоторые Сенсорная непрозрачность. Например, то, что я пытаюсь сделать, это если статус и проверка в API оба являются истинными, тогда пользователь может перейти к следующему, а его цвет красный. экран, нажав на эту осязаемую непрозрачность, но если один из них false, тогда сенсорная непрозрачность будет отключена, и пользователь не сможет перейти к следующему экрану, а его цвет будет серым. Я не знаю, как это сделать, потому что я очень новичок в этом виде функций в 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 для живого редактирования

Пожалуйста, не отмечайте спам. Также, пожалуйста, приложите больше усилий, чтобы правильно отформатировать свой вопрос.

Inigo 18.12.2022 16:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
1
96
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TouchableOpacity имеет свойство disabled, поэтому вы должны его использовать. Это предотвратит выполнение onPress и навигацию пользователя.

Что касается стилей, вы можете проверить стиль, используя тот же логин.

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

Другие вопросы по теме