2

顶部图表使用常规标签。底部使用的是labelCompoent道具自定义标签。
似乎自定义标签是绝对定位的。

图片

这是世博小吃。 （点击查看Android和iOS上的问题）。

这是代码。

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { VictoryBar } from 'victory-native';
import svg from 'react-native-svg';

const CustomLabel = props => <Text>{props.text}</Text>;

const App = () => {
  const data = [
    { x: 0, y: 1, label: 'Test 1' },
    { x: 1, y: 2, label: 'Test 2' },
    { x: 2, y: 3, label: 'Test 3' },
  ];

  const w = Dimensions.get('screen').width * 0.9;

  return (
    <View style={styles.container}>
      <View style={{ flex: 1 }}>
        <VictoryBar data={data} width={w} />
      </View>
      <View style={{ flex: 1 }}>
        <VictoryBar data={data} width={w} labelComponent={<CustomLabel />} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 3,
    alignItems: 'center',
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

export default App;

如何正确定位自定义标签？

4

0 回答 0