1

这些是我的代码：

class StarListScrollViewCell extends Component{
static propTypes = {
    dateSource : React.PropTypes.array
}
constructor(props){
    super(props);
    this.state =  {
        starSide : 20,
    }
}
addStar(){
    LayoutAnimation.spring();
     this.setState({starSide: this.state.starSide + 10});
}
componentWillMount() {
    LayoutAnimation.spring();
}
render(){
    return(
        <View style={{backgroundColor: 'white' , height: 70 , width : Dimensions.get('window').width,flexDirection:'row'}}>
            <TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
            onPress = {this.addStar()}>
                <Image source={require('./star-gray.png')}
                       style ={{width:this.state.starSide,
                           height:this.state.starSide,
                           justifyContent:'center',alignItems:'center'}}>

                </Image>
            </TouchableOpacity>
        </View>
    );
}

}

单击按钮时遇到错误。我参考https://facebook.github.io/react-native/releases/next/docs/animations.html编写它

4

4 回答 4

1

您必须将此绑定到 addStar，因为当您从事件处理程序调用时，此上下文已更改。

constructor(props){
    super(props);
    this.state =  {
        starSide : 20,
    }

     this.addStar = this.addStar.bind(this);


}

<TouchableOpacity onPress = {this.addStar()}>

上面的行也可以正常运行，但它会立即被调用，这可能不是你的目的，所以改为使用

<TouchableOpacity onPress = {this.addStar}>
于 2017-02-15T14:02:31.397 回答
0

在 JSX 中使用它时，您应该将上下文绑定到您的处理程序，并且当您设置onPressprop 时不要调用该方法，只需传递对它的引用：

 <TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}}
            onPress = {this.addStar.bind(this)}>
于 2017-02-15T14:06:40.980 回答
0

React 处理程序不会自动绑定到它们所在的元素/类。

更改 onPress = {this.addStar()}>为

 onPress = {this.addStar.bind(this)}>
于 2017-02-15T14:07:37.807 回答
0

您可以使用箭头函数代替绑定：

addStar = () => {
    LayoutAnimation.spring();
     this.setState({starSide: this.state.starSide + 10});
}

进而：

<TouchableOpacity onPress={this.addStar}>
于 2017-02-23T10:57:42.557 回答