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

使用react-native-collapsible-view。 它似乎完全可以满足您的需求。

Answer 2

在构造函数中添加

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

在 onPress 中替换为

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

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

https://snack.expo.io/HkxpgSlPZ

@+

Answer 3

你错过了函数绑定：

constructor(props) {
    super(props);

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

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

正如@AlexanderIgnácz 所说，那里有一个错字-应该将this.isModalVisible 更改为this.state.isModalVisible。也许迟了，但我也想说，为了完成这个答案。

Answer 4

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