如何在React-Native-Paper Chip组件的onPress中查看组件

rkue9o1l  于 2023-01-21  发布在  React
关注(0)|答案(1)|浏览(145)

我想在点击Chip的onPress时显示一个Add按钮。我想显示的组件是onPressChip()函数。这是我的代码。

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;

但它不起作用。请帮帮忙。

r3i60tvu

r3i60tvu1#

取一个布尔状态变量,根据该变量可以管理查看或隐藏按钮:

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;

这将在显示所有平面列表数据后添加一个按钮。

相关问题