У меня есть 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





TouchableOpacity имеет свойство disabled, поэтому вы должны его использовать. Это предотвратит выполнение onPress и навигацию пользователя.
Что касается стилей, вы можете проверить стиль, используя тот же логин.
<TouchableOpacity disabled = {!result.Status || !result.Check} style = {{ background: (!result.Status || !result.Check) ? 'grey' : 'red' }}>
Пожалуйста, не отмечайте спам. Также, пожалуйста, приложите больше усилий, чтобы правильно отформатировать свой вопрос.