2017-02-05 8 views
0

新しいネイティブclearyに反応する。ビューを隠すのに苦労します。ビューの不透明度を変更するにはTouchableWithoutFeedbackをonclickしようとしています。私が試してみて、これを行うにはthis.stateを使用していますが、私は状態に設定したものに関係なくは、それは反応ネイティブのビューを非表示にする方法

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> 
    ); 
    } 
} 
+0

ここには多くの問題があります。私は再びいくつかのガイドに行くことをお勧めします。状態を変更する方法と簡略関数を使用する方法を見てください。リンターの使用を検討してください。 gotoNextは使用されていません。ガイドでは、これがコンストラクタのいくつかのメソッドにバインドされていることがあります。これはgotoNextの使い方に応じて、おそらくあなたにとっても面白いでしょう。 –

+1

this.state.x = yは再レンダリングされません。あなたはthis.setState({x:y})を呼び出す必要があります –

+0

ありがとう@sumanjこれは私がしなければならなかったものでした。 –

答えて

1

this.state.x = yが再表示されませんgotoNext機能で見つけることができません。レンダリングのためにthis.setState({x:y})を再度呼び出す必要があります

関連する問題