在react native中隐藏/显示组件

Question

我想显示当我onPress自定义组件。自定义组件是用多个和封装的。

我的意思是show when onPress当然，是用。

,

import React from 'react';
import {
SafeAreaView,
Text,
FlatList,
View,
StyleSheet,
StatusBar,
Image,
ScrollView,
TouchableHighlight,
TouchableOpacity,
Button,
} from 'react-native';
import HeartButtons from './buttons';
import Item from './items';
const App = () => {
const renderItem = ({item}: any) => (
<View style={{backgroundColor: colors.white}}>
<Item title={item.title} />
<TouchableOpacity activeOpacity={0.5} style={styles.buttonHeartStyle}>
<Image source={heart} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} style={styles.buttonCheckStyle}>
<Image source={check} />
</TouchableOpacity>
</View>
);
return (
<SafeAreaView>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
<TouchableOpacity
activeOpacity={0.7}
onPress={clickHandler}
style={styles.touchableOpacityStyle}>
</TouchableOpacity>
</SafeAreaView>
);

};
export default App;

这是代码的一部分。当我点击<Item title={item.title} />时，

我该怎么办?

我已经一个星期没吃了。如果你能帮助我，我会很感激的。

提前谢谢你。

Answer 1

把你的renderItem修改成这样

const renderItem = ({ item }: any) => {
const [isActive, setActive] = useState(false);
return (
<View style={{ backgroundColor: colors.white }}>
<TouchableOpacity onPress={() => setActive(!isActive)}>
<Item title={item.title} />
</TouchableOpacity>
{
isActive && 
<>
// Add here what you want to show
</>
}
</View>
);
};