Блог

На закуску У меня есть приложение для гистограммы с фильтрами. Я включил боковое меню в приложение. Мне нужно, чтобы гистограмма отображалась на главном экране, а фильтры отображались в боковом меню. В настоящее время моя гистограмма накладывается на боковое меню, вот так-

Я не уверен, как организовать контент на главном экране или в боковом меню. Может быть, я использую неправильный пакет? Фильтры взаимодействуют с гистограммой, поэтому их нельзя записать в разные функции.

При просмотре закуски щелчок в любом месте экрана открывает боковое меню.

 import React, { Component }  from 'react'
import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, TextInput, Picker, Button } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'
import {useState, useEffect, useCallback} from 'react'
import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'

const initialData = [12, 19, 12, 25, 22, 10];
const initialFrom = "0"
const initialToMonth = "7"
const months = [
      { month: "Jan", value: "0" },
      { month: "Feb", value: "1" },
      { month: "Mar", value: "2" },
      { month: "April", value: "3" },
      { month: "May", value: "4" },
      { month: "June", value: "5" },
    ];
const initialLevelsArr = [
          "Jan",
          "Feb",
          "Mar",
          "April",
          "May",
          "June",
        ];
const initialLabels = ["Jan", "Feb", "Mar", "April", "May", "June"];

export default function App() {

   const [open, setOpen] = useState(false)


   const toggleOpen = () => {
    setOpen(!open)
  };

  /*const toggleClose = () => {
   setOpen(false)
 };*/
 const [filterLimit, setfilterLimit] = useState(100);
 const [lessThanOrGreaterThan, setlessThanOrGreaterThan] = useState("greaterThan");
 const [datas, setDatas] = useState(initialData);
 const [from, setFrom] = useState(initialFrom);
 const [toMonth, setToMonth] = useState(initialToMonth);
 const [labels, setLabels] = useState(initialLabels);

   const applyFilter = () => {
     const isLessThan = lessThanOrGreaterThan === "greaterThan";
     const value = filterLimit;
     // update instance variable
     const newDatas = initialData.map(v => {
     if (isLessThan ? v >= value : v <= value) return v;
         return 0;
     });

     setDatas(newDatas);
   }

   const applyDateFilter = () => {
       const newLabels = initialLevelsArr.slice(
         parseInt(from),
         parseInt(toMonth)   1
       );
       const newDatas = initialData.slice(
         parseInt(from),
         parseInt(toMonth)   1
       );

       setLabels(newLabels);
       setDatas(newDatas);
     }

 const dataset = {
     labels: labels,
     datasets: [
       {
         data: datas,
         colors: [
           (opacity = 1) => `red`,
           (opacity = 1) => `blue`,
           (opacity = 1) => `yellow`,
           (opacity = 1) => `green`,
           (opacity = 1) => `purple`,
           (opacity = 1) => `orange`
         ]
       }
     ]
   }

  const drawerContent = () => {
    return (
      <SafeAreaView style={styles.chartContainer}>
      <TouchableOpacity onPress={toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
      <View>
        <TextInput
            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
            numeric
            placeholder="Filter Limit"
            value={filterLimit}
            onChangeText={text => setfilterLimit(text)}
          />
      </View>
      <View style={styles.pickerContainer}>
      <Picker
        selectedValue={lessThanOrGreaterThan}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setlessThanOrGreaterThan(itemValue)}
      >
        <Picker.Item label ="Greater Than" value="greaterThan" />
        <Picker.Item label="Less Than" value="lessThan" />
      </Picker>
    </View>
     <View style={styles.filterContainer}>
      <Button
        onPress={() => applyFilter()}
        title = "Apply Filter"
        color="#841584"
    />
    </View>
      </SafeAreaView>
    );
  };

    return (
      <View style={styles.container}>
        <MenuDrawer
          open={open}
          drawerContent={drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
        <BarChart
              data={dataset}
              width={300}
              height={220}
              withCustomBarColorFromData={true}
              flatColor={true}
              fromZero={true}
              chartConfig={{
                backgroundColor: '#ffffff',
                backgroundGradientFrom: '#ffffff',
                backgroundGradientTo: '#ffffff',
                data: dataset.datasets,
                color: (opacity = 1) => '#fff',
                labelColor: () => '#6a6a6a',
              }}
            />
      </View>
    );
}

const styles = StyleSheet.create({
  chartContainer: {
      flex: 1,
      backgroundColor: "#F5FCFF"
    },
    pickerContainer: {
     paddingHorizontal: 24,
     marginLeft: 100
   },
    inputContainer: {
    marginTop: 12,
    paddingHorizontal: 24,
  },
  filterContainer: {
  marginTop: 100,
  paddingHorizontal: 24,
},
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})
 
 

Я изменил некоторый пользовательский интерфейс, чтобы он соответствовал экрану, надеюсь, это то, что вы хотели

перекус:

 import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  TextInput,
  Picker,
  Button,
} from 'react-native';
import MenuDrawer from 'react-native-side-drawer';
import { useState, useEffect, useCallback } from 'react';
import {
  Chart,
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
} from 'react-native-chart-kit';

const initialData = [12, 19, 12, 25, 22, 10];
const initialFrom = '0';
const initialToMonth = '7';
const months = [
  { month: 'Jan', value: '0' },
  { month: 'Feb', value: '1' },
  { month: 'Mar', value: '2' },
  { month: 'April', value: '3' },
  { month: 'May', value: '4' },
  { month: 'June', value: '5' },
];
const initialLevelsArr = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];
const initialLabels = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];

export default function App() {
  const [open, setOpen] = useState(false);

  const toggleOpen = () => {
    setOpen(!open);
  };

  /*const toggleClose = () => {
   setOpen(false)
 };*/
  const [filterLimit, setfilterLimit] = useState(100);
  const [lessThanOrGreaterThan, setlessThanOrGreaterThan] = useState(
    'greaterThan'
  );
  const [datas, setDatas] = useState(initialData);
  const [from, setFrom] = useState(initialFrom);
  const [toMonth, setToMonth] = useState(initialToMonth);
  const [labels, setLabels] = useState(initialLabels);

  const applyFilter = () => {
    const isLessThan = lessThanOrGreaterThan === 'greaterThan';
    const value = filterLimit;
    // update instance variable
    const newDatas = initialData.map((v) => {
      if (isLessThan ? v >= value : v <= value) return v;
      return 0;
    });

    setDatas(newDatas);
  };

  const applyDateFilter = () => {
    const newLabels = initialLevelsArr.slice(
      parseInt(from),
      parseInt(toMonth)   1
    );
    const newDatas = initialData.slice(parseInt(from), parseInt(toMonth)   1);

    setLabels(newLabels);
    setDatas(newDatas);
  };

  const dataset = {
    labels: labels,
    datasets: [
      {
        data: datas,
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `blue`,
          (opacity = 1) => `yellow`,
          (opacity = 1) => `green`,
          (opacity = 1) => `purple`,
          (opacity = 1) => `orange`,
        ],
      },
    ],
  };

  const drawerContent = () => {
    return (
      <SafeAreaView style={styles.chartContainer}>
        <TouchableOpacity onPress={toggleOpen} style={styles.animatedBox}>
          <Text>Close</Text>
        </TouchableOpacity>
        <View>
          <TextInput
            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
            numeric
            placeholder="Filter Limit"
            value={filterLimit}
            onChangeText={(text) => setfilterLimit(text)}
          />
        </View>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={lessThanOrGreaterThan}
            style={{ height: 50, alignSelf: 'stretch' }}
            onValueChange={(itemValue, itemIndex) =>
              setlessThanOrGreaterThan(itemValue)
            }>
            <Picker.Item label="Greater Than" value="greaterThan" />
            <Picker.Item label="Less Than" value="lessThan" />
          </Picker>
        </View>
        <View style={styles.filterContainer}>
          <Button
            onPress={() => applyFilter()}
            title="Apply Filter"
            color="#841584"
          />
        </View>
      </SafeAreaView>
    );
  };

  return (
    <View style={styles.container}>
      <MenuDrawer
        open={open}
        drawerContent={drawerContent()}
        drawerPercentage={45}
        animationTime={250}
        overlay={true}
        opacity={0.4}>
        <TouchableOpacity onPress={toggleOpen} style={styles.body}>
          <Text>Open</Text>
        </TouchableOpacity>
        <BarChart
          data={dataset}
          width={300}
          height={220}
          withCustomBarColorFromData={true}
          flatColor={true}
          fromZero={true}
          chartConfig={{
            backgroundColor: '#ffffff',
            backgroundGradientFrom: '#ffffff',
            backgroundGradientTo: '#ffffff',
            data: dataset.datasets,
            color: (opacity = 1) => '#fff',
            labelColor: () => '#6a6a6a',
          }}
        />
      </MenuDrawer>
    </View>
  );
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    zIndex: 5,
    backgroundColor: '#F5FCFF',
  },
  pickerContainer: {
    alignSelf: 'stretch',
  },
  inputContainer: {
    marginTop: 12,
    paddingHorizontal: 24,
  },
  filterContainer: {
    marginTop: 100,
    paddingHorizontal: 24,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
    zIndex: 0,
  },
  animatedBox: {
    flex: 1,
    backgroundColor: '#38C8EC',
    padding: 10,
  },
  body: {
    alignSelf: 'stretch',
    height: 50,
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812',
  },
});