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

Question

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

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

我想要下面的图片。

Answer 1

你错过了函数bind：

constructor(props) {
    super(props);

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

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

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

Answer 2

您还应该使用this.state.isModalVisible代替this.isModalVisible中的callFunc()。

Answer 3

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

Answer 4

在构造函数中添加

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

onPress中的

替换为

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

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

https://snack.expo.io/HkxpgSlPZ

@ +