TouchableOpacityは触れずに実行する

Question

私は3つのTouchableOpacitiesを持っています。ユーザがタッチしたときに特定の機能を実行したいのですが、今のところアプリケーションを起動した後、タッチできない不透明度の関数が無限に実行されます。

TouchableOpacities

<View style={styles.headerButtonMain}> 
        <View style={styles.headerButton}> 
          <TouchableOpacity style={{ 
           marginRight: 25 
          }} onPress={this.loadListData()}> 
           <Image style={styles.button} source={require('./img/imgCase.png')}/> 
          </TouchableOpacity> 

          <TouchableOpacity style={{ 
           marginRight: 25 
          }} onPress={this.loadCustomerData()}> 
           <Image style={styles.button} source={require('./img/imgCall.png')}/> 
          </TouchableOpacity> 
          <TouchableOpacity style={{ 
           marginRight: 25 
          }} onPress={this._onPressButton}> 
           <Image style={styles.button} source={require('./img/imgCase.png')}/> 
          </TouchableOpacity> 
        </View> 
        <Text style={{ 
         fontSize: 18, 
         color: '#fff', 
         marginLeft: 15, 
         marginTop: 38, 
         marginBottom: 20 
        }}>My Cases</Text> 
       </View> 

機能

render() { 
      if(this.viewCaseData === true){ 
      var caseList = <View > 
       <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}></ListView> 

      </View> 
    }else{ 
      var caseList = <ScrollView style={{ 
       marginLeft: 10, 
       marginRight: 10 
      }}> 
       <View style={{ 
        marginBottom: 10, 
        flexDirection: 'row' 
       }}> 
        <View> 
         <Text style={styles.textLabel}>Search</Text> 
         <Text style={styles.textDetail}>value</Text> 
        </View> 
        <View > 
         <TouchableOpacity style={{ 
          marginLeft: 320, 
          height: 30, 
          width: 30, 
          backgroundColor: '#DA4336' 
         }}> 
          <Text style={{ 
           color: '#fff' 
          }}>Search</Text> 
         </TouchableOpacity> 
        </View> 
       </View> 

       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Customer Category</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 
       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Customer Category Type</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Customer Code Type</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Customer Code</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>BranchLocation</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Title</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Full Name</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Initials</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Lastname</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Preferred Name</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>DateOf Birth</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Gender</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Mother Maiden Name</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Nationality</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Religon</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Marital Status</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Preferred Language</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Mobile01</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Mobile02</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 

       <View style={styles.seperator}/> 
       <View style={styles.textMainView}> 
        <Text style={styles.textLabel}>Email</Text> 
        <Text style={styles.textDetail}>value</Text> 
       </View> 
      </ScrollView> 
      } 

      return (
       <View > 
        <View style={styles.headerView}> 

         <View > 
          <View style={styles.circle}> 
           <Text style={{ 
            fontSize: 40, 
            fontWeight: 'bold', 
            color: '#fff', 
            marginLeft: 18 
           }}>A</Text> 
          </View> 

          <Text style={{ 
           fontSize: 18, 
           color: '#fff', 
           marginLeft: 15, 
           marginTop: 5, 
           marginBottom: 20 
          }}>User Name</Text> 
         </View> 

         <View style={styles.headerButtonMain}> 
          <View style={styles.headerButton}> 
            <TouchableOpacity style={{ 
             marginRight: 25 
            }} onPress={this.loadListData()}> 
             <Image style={styles.button} source={require('./img/imgCase.png')}/> 
            </TouchableOpacity> 

            <TouchableOpacity style={{ 
             marginRight: 25 
            }} onPress={this.loadCustomerData()}> 
             <Image style={styles.button} source={require('./img/imgCall.png')}/> 
            </TouchableOpacity> 
            <TouchableOpacity style={{ 
             marginRight: 25 
            }} onPress={this._onPressButton}> 
             <Image style={styles.button} source={require('./img/imgCase.png')}/> 
            </TouchableOpacity> 
          </View> 
          <Text style={{ 
           fontSize: 18, 
           color: '#fff', 
           marginLeft: 15, 
           marginTop: 38, 
           marginBottom: 20 
          }}>My Cases</Text> 
         </View> 

        </View> 
        <View> 
         <View> 
          <ColoredFab> 
           <Image pointerEvents="none" source={require('./img/plus_white.png')}/> 
          </ColoredFab> 
         </View> 

    {caseList} 
        </View> 

       </View> 

      ); 
     } 

Answer 1

をレンダリングするには問題がonPress機能を期待していることですが、関数を直接呼び出すので、値としてあなたの関数の結果を持っています。あなたは十分であろう機能this.loadListData以内にそれを使用していない2つ目は、矢印であなたの呼び出しをラップしている場合

<TouchableOpacity onPress={this.loadListData.bind(this)}> 

または

<TouchableOpacity onPress={() => this.loadListData()}> 

は最初のものは、（これをバインド行うことのいずれか関数