不知道如何在react native中单击按钮来渲染此组件

Question

下面是一个barChart函数。它在屏幕中返回一个barChart-

const barCharts = () => {
  const fill = 'rgb(134, 65, 244)'
  const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
  return (
    <View style={styles.sectionContainer}>
      <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
        <Grid />
      </BarChart>
    </View>
  );
};

我希望这个barChart组件在单击按钮时进行渲染。我目前的环境是react原生ios。在App.js中单击一个按钮，我将如何完成渲染？

Answer 1

您可以使用道具或状态。

const barCharts = () => {
  const { showBarChart } = this.props;
  const fill = 'rgb(134, 65, 244)'
  const data = [
    50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, 
    -20, -80
  ];
  return (
    <View style={styles.sectionContainer}>
      {showBarChart && (
        <BarChart
          style={{ height: 200 }}
          data={data}
          svg={{ fill }}
          contentInset={{ top: 30, bottom: 30 }}
        >
          <Grid />
        </BarChart>
      )}          
    </View>
  );
}; 

Answer 2

const BarCharts = () => {
  const fill = 'rgb(134, 65, 244)'
  const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
  return (
    <View style={styles.sectionContainer}>
      <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
        <Grid />
      </BarChart>
    </View>
  );
};
const OtherComponent = () => {
    const [clicked, setClicked] = React.useState(false);
    return <View>
        <Button onClick={() => setClicked(!clicked)}>Click me</Button>
        {clicked && <BarCharts />}
    </View>
}

像这样的东西，可能不是100%反应本地兼容，但你应该能够调整它。