Question

新的反应原生的清洁。苦苦挣扎以隐藏视图。我正试图点击TouchableWithoutFeedback来改变视图的不透明度。我正在使用this.state来尝试这样做，但无论我设置什么状态都无法在gotoNext函数中找到它

export default class MainView extends Component
{
  constructor(props) {
    super(props);
    this.state = {hideInfo:false,infoOpacity:0.75};
  }

  onTap(){
    console.log("tap tap");
    this.setState({hideInfo:!this.state.hideInfo});
    if(this.state.hideInfo)
    {
      this.setState({infoOpacity:0});
    }else{
      this.setState({infoOpacity:0.75});
    }
  };

  render()
  {
    var pages = []
    for (var i = 65; 90 >= i; i++) {// A-65, Z-90
      c = String.fromCharCode(i);
      var letters = []
      customData.pages.forEach(function(meow){
        if(meow.letter.toUpperCase() == c)
        {
          letters.push(meow);
        }
      });

      var ranPage = letters[Math.floor(Math.random() * letters.length)];
      const window = Dimensions.get('window');
      if(ranPage){
        pages.push(
            <View key={1}>
            <TouchableWithoutFeedback onPress={this.onTap.bind(this)}>
              <Image source={{uri: ranPage.image}} style={{width: window.width, height: window.height}} />
            </TouchableWithoutFeedback>
                <View style={[styles.meow, {opacity: this.state.infoOpacity}]}>
                  <Text style={styles.text}>{ranPage.name}</Text>
                  <Text style={styles.text}>{ranPage.phonetic}</Text>
                  <Text style={styles.text2}>{ranPage.description}</Text>
                </View>
            </View>
        )
      }else{
        console.log(c)
      }
}

    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        {pages}
      </Swiper>
    );
  }
}

Answer 1

this.state.x = y不会重新渲染。您需要再次调用this.setState（{x：y}）进行渲染

如何在本机中隐藏视图

1 个答案: