1

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

我的代码：

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

我想喜欢下面的图片。

在此处输入图像描述

4

4 回答 4

2

你错过了函数绑定：

constructor(props) {
    super(props);

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

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

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

于 2017-08-03T05:55:51.173 回答
2

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

于 2017-08-03T06:00:32.177 回答
0

在构造函数中添加

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

在 onPress 替换为

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

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

https://snack.expo.io/HkxpgSlPZ

@+

于 2017-08-03T06:23:05.997 回答
0

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

于 2020-08-31T19:47:09.503 回答