デフォルトのスライダーの値にリセットする反応ネイティブ

Question

スライダーのリセットボタンを作成します。このボタンを押すと初期値にリセットされます。私のコードはエラーを表示しませんが、リセットボタンは機能しません。

これは、Sliderコンポーネントです：

import React, {Component} from 'react'; 
import {Slider, 
    Text, 
    StyleSheet, 
    View} from 'react-native'; 
import {ButtonReset} from './ResetButton.js' 


export class SliderRoll extends Component { 

    state = { 
    value: 1, 
    }; 

    resetSliderValue =() => this.setState({value : 1}) 

    render() { 
    return (
     <View style={styles.container}> 
     <Slider style={styles.slider} 
      minimumTrackTintColor={'blue'} 
      maximumTrackTintColor={'red'} 
      maximumValue = {2} 
      value= {this.state.value} 
      step={0.5} 
      onValueChange={(value) => this.setState({value: value})} 
     /> 

     <ButtonReset resetSliderValue = {this.state.resetSliderValue}/> 
     <Text style={styles.text} > 
      {this.state.value} 
     </Text> 

     </View> 
    ); 
    } 
} 
const styles = StyleSheet.create({ 
    container: { 
    flexDirection:'column', 
    width: 150, 
    backgroundColor: 'pink', 
    marginLeft: 50, 
    justifyContent: 'center' 
    }, 
    slider: { 
    width: 150, 
    }, 
    text: { 
    fontSize: 20, 
    textAlign: 'center', 
    fontWeight: '500', 
    }, 
}) 

これはリセットボタンである：ここで

import React, {Component} from 'react'; 
import { 
    Text, 
    View, 
    StyleSheet, 
    Image, 
    TouchableOpacity 
} from 'react-native'; 

export class ButtonReset extends Component{ 
    render(){ 
     return(
     <TouchableOpacity style = {styles.container} 
      onPress= {this.props.resetSliderValue}> 
      <Image 
      style={styles.button} 
      source={require('./restart.png')} 
      /> 
     </TouchableOpacity> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     width: 50, 
     alignItems: 'center', 
     backgroundColor: 'pink', 
     marginLeft: 50, 
     marginTop: 10, 
    }, 
    button: { 
     width:50, 
     height:50, 
     transform: [ 
      {scale: 1} 
     ] 
    } 
}) 

Answer 1

はすぐに出て立ち往生問題作品です：

<ButtonReset resetSliderValue = {this.state.resetSliderValue}/>

私はそれがすべきだと信じています：

<ButtonReset resetSliderValue = {this.resetSliderValue}/>

また、私はあなたがthisをバインドする必要があるので、あなたがresetSliderValue機能の状態を設定するためのthisにアクセスすることができると信じて。私は個人的には、レンダリング時にその不要な再バインドを、それを必要としない任意の機能のために一度、コンストラクタでこれをバインドしたい：

constructor(props) { 
    super(props); 
    this.resetSliderValue = this.resetSliderValue.bind(this); 
}