javascript - 不确定如何通过单击 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-native ios。单击 App.js 中的按钮后，我将如何完成渲染？

标签： javascriptreactjsreact-native

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>
  );
};