1

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

我也使用了 lodash 的 debounce，但我没有工作，虽然它在一定程度上解决了滞后问题，但由于我必须实时更新状态并将其显示在屏幕上，所以反映在屏幕上的值的变化正在发生时间。

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

要查看 Gif 的更多详细信息有什么问题，请单击此处

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
},
})
4

0 回答 0