React Native - 在按钮上隐藏和显示组件点击动画

问题描述：

朋友我有隐藏和显示在运行时当用户点击按钮的组件（视图）必须隐藏并再次点击它应该显示的按钮。React Native - 在按钮上隐藏和显示组件点击动画

mycode的：

constructor(props) { 
    super(props); 
    this.state = { 
     isModalVisible : false, 
    }; 
    } 

callFunc(){ 
    if(this.isModalVisible){ 
    this.setState({isModalVisible:false}); 
    }else{ 
    this.setState({isModalVisible:true}); 
    } 
} 

render() { 
    return (

     <View style = {styles.companyScroll}> 
     <Button 
      onPress={this.callFunc} 
      title="Learn More" 
      color="#841584" 
      accessibilityLabel="Learn more about this purple button" 
     /> 

     {this.state.isModalVisible && <Picker style ={{backgroundColor : 'white'}} 
       selectedValue={this.state.language} 
       onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}> 
       <Picker.Item label="Java" value="java" /> 
       <Picker.Item label="JavaScript" value="js" /> 
       </Picker> 

     </View> 
    ) 
}

我要像下面的图片。

答

您还应该使用this.state.isModalVisible而不是this.isModalVisible从callFunc()。

谢谢。工作中。但想要动画。任何想法。 –

什么样的动画，不透明或下拉或其他？ – Val

你应该使用动画组件。 https://facebook.github.io/react-native/docs/animated.html –

答

你错过了功能绑定：

constructor(props) { 
    super(props); 

    this.callFunc = this.callFunc.bind(this); 
    ... 
}

没有它，callFunc不会在this对象的范围，并有将其状态的访问权限。

而@ @AlexanderIgnácz说，那里有一个错字 - 应该将this.isModalVisible更改为this.state.isModalVisible。也许晚了，但我也想说，并为此目的来完成这个答案。

我会尝试但不工作。该功能被调用并且只能打开视图，但它不会在第二次敲击时隐藏。 –

关于动画，请检查我关于卡组件显示和隐藏的另一个答案。它可能对你有用。 https://stackoverflow.com/a/45428351/681830 – Val

呃，联系我什么？我们可以在这里提问/回答吗？ – Val

答

在构造函数中添加

this.callFunc = this.callFunc.bind(this);

在onPress与

{()=>{ this.callFunc(); }

你可以在这里看到一个豆蔻例如更换：

https://snack.expo.io/HkxpgSlPZ

@ +

React Native - 在按钮上隐藏和显示组件点击动画

相关推荐