Question

我有三个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

问题是<TouchableOpacity onPress={this.loadListData.bind(this)}>需要一个函数，但是你直接调用该函数，因此它将函数的结果作为值。你可以做

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

或

this.loadListData

第一个绑定它（如果你不在函数{{1}}中使用它就足够了，第二个用箭头函数包裹你的电话。

TouchableOpacity执行时不触碰

1 个答案: