Как масштабировать высоту победы-родной? - PullRequest
Новая
       55

Как масштабировать высоту победы-родной?

0 голосов
/ 24 сентября 2019

Я использую графики Победы в своем приложении React Native.У меня есть экран с некоторым содержимым вверху, диаграмма в середине и нижний колонтитул внизу.Я использую flex для управления высотой элементов, и в моем примере область диаграммы составляет всего 1/4 от полной высоты.Тем не менее мне бы хотелось, чтобы диаграмма Победы всегда помещалась внутри этого элемента, чтобы вся диаграмма была видна на маленьких экранах и чтобы она была выше на больших экранах.

Как мне исправить свой код? 

<SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 2, backgroundColor: 'grey' }}>
      <Text>Header</Text>
    </View>
    <View style={{ flex: 1 }}>

        <ScrollView horizontal={true}>
          <VictoryChart
            width={1000}
            domainPadding={50}>
            <VictoryAxis
              dependentAxis={true}
              style={{
                grid: { stroke: 'grey' },
              }}
            />
            <VictoryAxis />
            <VictoryBar
              style={{ data: { fill: 'red' } }}
              data={[
                { x: '1', y: 2 },
                { x: '2', y: 3 },
                { x: '3', y: 5 },
                { x: '4', y: 3 },
                { x: '5', y: 5 },
                { x: '6', y: 3 },
                { x: '7', y: 5 },
                { x: '8', y: 3 },
                { x: '9', y: 5 },
                { x: '10', y: 3 },
                { x: '11', y: 5 },
                { x: '12', y: 3 },
                { x: '13', y: 5 },
                { x: '14', y: 5 },
                { x: '15', y: 3 },
              ]}
            />
          </VictoryChart>
      </ScrollView>
    </View>
    <View style={{ flex: 1, backgroundColor: 'grey' }}>
      <Text>Footer</Text>
    </View>
</SafeAreaView>

Example

Посмотреть эту закуску Экспо: https://snack.expo.io/BkgC-9Dvr

...