如何在反应本机中隐藏视图



>new to react native cleary.努力隐藏视图。我正在尝试单击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>
    );
  }
}

this.state.x = y 不会重新渲染。你需要再次调用this.setState({x:y}(进行渲染

相关内容

  • 没有找到相关文章

最新更新