[英]Function is not working upon click of the button
我在底部有一个Button
元素。 onPress
不知何故没有呈现我的 function - 'barCharts' - 我想知道为什么点击时它没有显示组件。 我正在使用 react-native 论文库中的按钮。
import * as React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Button, Menu, Divider, Provider, TextInput } from 'react-native-paper';
import { BarChart, LineChart, Grid } from 'react-native-svg-charts';
import { Colors } from 'react-native/Libraries/NewAppScreen';
const App = () => {
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 [visible, setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View
style={{
paddingTop: 50,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Menu
visible={visible}
onDismiss={closeMenu}
anchor={<Button onPress={openMenu}>Show menu</Button>}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Divider />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</View>
<View style={styles.sectionContainer}>
<Button onPress={barCharts}>Show barCharts</Button>
</View>
</Provider>
);
};
export default App;
您正在按钮内渲染整个组件 - 这将无法显示。 你真正打算做的更像是
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]
const barCharts = (
<View style={styles.sectionContainer}>
<BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
<Grid />
</BarChart>
</View>
);
<View style={styles.sectionContainer}>
<Button onPress={() => setShowBarCharts(true)}>Show barCharts</Button>
</View>
{showBarCharts && barcharts}
这将确保条形图在单击按钮时显示。
编辑:为如何更改条形图组件添加一点 - 目前是 function。 我怀疑你将不得不渲染一个 jsx 元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.