Question

问题在于，当我仅在应用程序中仅使用滑块而没有其他代码时，仅实现了滑块，那么滑块中就没有问题。但是，当我将滑块与其他组件一起使用时，即屏幕上有很多状态变量和组件，那么滑块就很滞后，状态值的变化在屏幕上反映得很晚。

我也使用lodash的反跳功能，但是我没有用，虽然它在某种程度上解决了滞后问题，但是由于我必须实时更新状态并将其显示在屏幕上，因此屏幕需要时间。

请有人告诉您如何解决此问题。下面的代码 HomeScreen.js 正在产生问题。 下面的代码创建了这个问题，并且滑块很滞后，状态值没有立即更改，即它反映了屏幕上最近滑块值的变化，我认为这是由于VictoryChart组件引起的

要了解有关Gif的更多详细信息，什么是问题click here

import React, { Component } from 'react'
import {View,StyleSheet,Text,ScrollView} from 'react-native';
import _ from 'lodash';
import { Slider} from 'react-native-elements';
import {VictoryArea,VictoryChart,createContainer,VictoryTheme, VictoryTooltip,VictoryBar} from 'victory-native';
import {Defs,LinearGradient,Stop} from 'react-native-svg';
sampleData=[
  { key:'1',x: 'Jan', y: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',x: 'Feb', y: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',x: 'March', y: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',x: 'Apr', y: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',x: 'May', y: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',x: 'June', y: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',x: 'July', y: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]
export default class HomeScreen extends Component{
    static navigationOptions = {
        title:'Annual Employee’s Contribution',
    }
    state = {
        search: '',
        slider:0,
        age:'0',
        value:0,
        overrideSlider:true
      };
    sliderChanger =(slider) =>{
      this.setState({slider})
    }
    render(){
        const VictoryZoomVoronoiContainer = createContainer( "voronoi","cursor");
        return(
            <View style = {styles.container} >
                <ScrollView >
                  <Slider
                    value={this.state.slider}
                    onValueChange={value => {this.sliderChanger(value) }}
                    maximumValue={100}
                    step={1}
                 />
                <Text>Value: {this.state.slider}</Text>
                <View>
              <VictoryChart
                domain={{ y: [0, 7] }}
                theme={VictoryTheme.material}
                containerComponent={
                <VictoryZoomVoronoiContainer
                  labels={(d) => `${d.x}, ${d.y}`}
                  labelComponent={
                  <VictoryTooltip
                      cornerRadius={(d) => d.x > 6 ? 0 : 20}
                      pointerLength={(d) => d.y > 0 ? 5 : 20}
                      flyoutStyle={{
                      stroke: (d) => d.x === 10 ?
                          "tomato" : "black"
                      }}/>}
                  />
                  }
              >
                <Defs>
                  <LinearGradient id="gradientStroke"
                  x1="0%"
                  x2="0%"
                  y1="0%"
                  y2="100%"
                  >
                  <Stop offset="10%" stopColor="#008aefcb" stopOpacity="1" />
                  <Stop offset="100%" stopColor="#52da9c" stopOpacity="0" />
                  </LinearGradient>
                </Defs>
                <VictoryArea
                    data={sampleData}
                    interpolation="cardinal"
                    style={{
                    data: {
                        fill: 'url(#gradientStroke)',
                        stroke: '#1E93FA',
                        strokeWidth: 2
                    }
                    }}
                />
                </VictoryChart>
                </View> 
              </ScrollView>
          </View>
        );
    }
}

现在，当删除VictoryChart滑块时，它可以正常工作

import React, { Component } from 'react'
import {View,StyleSheet,Text,ScrollView} from 'react-native';
import _ from 'lodash';
import { Slider} from 'react-native-elements';
import {VictoryArea,VictoryChart,createContainer,VictoryTheme, VictoryTooltip,VictoryBar} from 'victory-native';
import {Defs,LinearGradient,Stop} from 'react-native-svg';
sampleData=[
  { key:'1',x: 'Jan', y: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',x: 'Feb', y: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',x: 'March', y: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',x: 'Apr', y: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',x: 'May', y: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',x: 'June', y: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',x: 'July', y: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]
export default class HomeScreen extends Component{

    static navigationOptions = {
        title:'Annual Employee’s Contribution',
    }
    state = {
        search: '',
        slider:0,
        age:'0',
        value:0,
        overrideSlider:true
      };
    sliderChanger =(slider) =>{
      this.setState({slider})
    }
    render(){
        const VictoryZoomVoronoiContainer = createContainer( "voronoi","cursor");
        return(
            <View style = {styles.container} >
                <ScrollView >
                  <Slider
                    value={this.state.slider}
                    onValueChange={value => {this.sliderChanger(value) }}
                    maximumValue={100}
                    step={1}
                 />
                <Text>Value: {this.state.slider}</Text>
                <View>

                </View> 
              </ScrollView>
          </View>
        );
    }
}
const styles = StyleSheet.create({
container:{
    backgroundColor:'#f8f8f8',
    flex:1
},
})

react-native-elements滑块太慢

0 个答案: