Я создаю своего рода приложение списка, я хочу, чтобы пользователь при нажатии на TouchableOpacity изменил состояние. State содержит количество раз, сколько раз нужно щелкнуть по атрибуту с именем repeat, например, если повторение равно (5). Я хочу, чтобы пользователь изменял значение click (4) и т. Д.
Я пробовал много вещей решить, но, к сожалению, ничего не работает Может кто-нибудь помочь?
import React, {useState, useEffect ,useCallback} from 'react';
import {View,
Text,
StyleSheet,
FlatList ,
TouchableOpacity,
ImageBackground,
Dimensions,
} from 'react-native';
import Spacer from '../components/Spacer';
import Audio from '../components/Audio';
import myApi from '../APIs/myApi';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const ShowScreen = ({ navigation }) => {
const [text, setText] = useState({});
const [repeat, setRepeat] = useState();
const id = navigation.getParam('id');
const title = navigation.getParam('title');
const Api = async() => {
const response = await myApi.get(`/${id}`);
setText(response.data);
};
useEffect(() => {
Api();
} , []);
return (
<View style={styles.container}>
<Text style = {styles.textHead}> {title} </Text>
<FlatList
data = {text.content}
keyExtractor = {(text) => text.id}
renderItem = {({item}) => {
return (
<View style = {styles.listContainer}>
<TouchableOpacity onPress = {() => item.repeat = item.repeat - 1}>
<Text style= {styles.textList}> {item.text} </Text>
<Spacer />
<Audio link = {item.audio_url} />
</TouchableOpacity>
<View style = {styles.repeatContianer} >
<Text> {item.repeat} </Text>
</View>
</View>
);
}}
extraData = {text.repeat}
/>
</View>
);
};
const styles = StyleSheet.create({
container : {
flex : 1,
alignItems : 'center',
marginTop : 15,
},
textHead : {
fontSize : 26,
textDecorationLine : 'underline',
fontWeight : 'bold'
},
textList : {
fontSize : 20,
fontStyle : 'italic',
margin : 5,
alignSelf: 'center',
justifyContent : 'center',
},
listContainer : {
borderWidth : 1 ,
justifyContent : 'center',
alignItems : 'center',
margin : 5,
borderRadius : 7
},
repeatContianer : {
flex: 1,
borderWidth : 1.5,
borderRadius : 5,
borderColor : 'red',
margin : 5
},
backGround : {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
width : SCREEN_WIDTH,
height : SCREEN_HEIGHT,
opacity : 0.4
}
});
export default ShowScreen;