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-native 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％符合本机的，但您应该可以对其进行调整。

不确定如何在react-native中单击按钮来渲染此组件

2 个答案: