React Native - 使用动画在按钮单击时隐藏和显示组件

Question

朋友，当用户单击组件（视图）必须隐藏的按钮并再次单击它应该显示的按钮时，我在运行时隐藏和显示时遇到问题。

我的代码：

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

我要点赞下图

Answer 1

您错过了函数绑定：

constructor(props) {
    super(props);

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

没有它，callFunc 将不在 this 对象的范围内并且无法访问其状态。

正如@AlexanderIgnácz 所说，这里有一个错字——应该将 this.isModalVisible 改为 this.state.isModalVisible。也许晚了，但也是我要说的，为了完成这个答案。

Answer 2

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

Answer 3

在构造函数中添加

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

在 onPress 中替换为

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

你可以在这里看到一个小例子：

https://snack.expo.io/HkxpgSlPZ

@+

Answer 4

使用react-native-collapsible-view。 它似乎完全符合您的需求。