React-Native-Paper Chip組件onPress中如何查看某個組件

Question

我想在單擊 Chip 的 onPress 時顯示一個添加按鈕。 我要顯示的組件是 onPressChip() function。這是我的代碼。

const Item = ({title}) => (
  <View>
    <Chip onPress={() => onPressChip()} style={{margin: 'auto'}}>
      {title}
    </Chip>
  </View>
);

const onPressChip = () => {
  <View style={{flexDirection: 'row-reverse', marginTop: 10}}>
    <Button
      disabled={false}
      icon={'plus'}
      mode="contained"
      onPress={() => onClickAddButton()}
      color={'#0AB155'}
      style={{left: 0, marginTop: 5}}>
      {'Add'}
    </Button>
  </View>;
};


const GradingList = ({DATA}) => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({item}) => <Item title={item.name} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

export default GradingList;

但它不起作用。 請幫忙。

Answer 1

拿一個 boolean state 變量，你可以管理查看或隱藏按鈕：

const[isButtonVisible,setIsButtonVisible]=useState(false)
const Item = ({title}) => (
  <View>
    <Chip onPress={() => setIsButtonVisible(!isButtonVisible)} style={{margin: 'auto'}}>
      {title}
    </Chip>
  </View>
);

const onPressChip = () => {
 return( <View style={{flexDirection: 'row-reverse', marginTop: 10}}>
    <Button
      disabled={false}
      icon={'plus'}
      mode="contained"
      onPress={() => onClickAddButton()}
      color={'#0AB155'}
      style={{left: 0, marginTop: 5}}>
      {'Add'}
    </Button>
  </View>)
};


const GradingList = ({DATA}) => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({item}) => <Item title={item.name} />}
        keyExtractor={item => item.id}
      />
      {isButtonVisible&&onPressChip()}
    </SafeAreaView>
  );
};

export default GradingList;

這將在顯示所有平面列表數據后添加一個按鈕。