离线时touchableopacity不起作用

Question

touchableopacity is not working when offline, sometimes it take really slow like take a few minute to run onPress

<TouchableOpacity
      onPress={() => this.example()}
      style={{padding: 10, justifyContent: 'center', flexDirection: 'row', backgroundColor: '#F26525', width: Dimensions.get('screen').width * 0.8, borderRadius: 3, marginTop: 15}}>
      <Icon name='refresh' size={20} color='#ffffff' />
      <Text style={{fontSize: 16, color: '#ffffff', fontFamily: 'Quicksand-Medium'}}> Try Again</Text>
    </TouchableOpacity>

i using : react-native-cli: 2.0.1 react-native: 0.55.1

i tried to change into touchablewithoutfeedback, but it still the same

thanks for your help ,

Answer 1

You will have to bind your function like this.

<TouchableOpacity
      onPress={this.example.bind(this)}
      style={{padding: 10, justifyContent: 'center', flexDirection: 'row', backgroundColor: '#F26525', width: Dimensions.get('screen').width * 0.8, borderRadius: 3, marginTop: 15}}>
      <Icon name='refresh' size={20} color='#ffffff' />
      <Text style={{fontSize: 16, color: '#ffffff', fontFamily: 'Quicksand-Medium'}}> Try Again</Text>

or you can also bind your function in your constructor as well

constructor(props) {
super(props)
this.example = this.example.bind(this)
}

<TouchableOpacity
      onPress={this.example}
      style={{padding: 10, justifyContent: 'center', flexDirection: 'row', backgroundColor: '#F26525', width: Dimensions.get('screen').width * 0.8, borderRadius: 3, marginTop: 15}}>
      <Icon name='refresh' size={20} color='#ffffff' />
      <Text style={{fontSize: 16, color: '#ffffff', fontFamily: 'Quicksand-Medium'}}> Try Again</Text>

or like this

<TouchableOpacity
      onPress={() => {console.log('Pressed!')}}
      style={{padding: 10, justifyContent: 'center', flexDirection: 'row', backgroundColor: '#F26525', width: Dimensions.get('screen').width * 0.8, borderRadius: 3, marginTop: 15}}>
      <Icon name='refresh' size={20} color='#ffffff' />
      <Text style={{fontSize: 16, color: '#ffffff', fontFamily: 'Quicksand-Medium'}}> Try Again</Text>

Answer 2

I think you should use just one component inside the touchableOpacity so do this:

 <TouchableOpacity
      onPress={() => this.example()}
      style={{padding: 10, justifyContent: 'center', flexDirection: 'row', backgroundColor: '#F26525', width: Dimensions.get('screen').width * 0.8, borderRadius: 3, marginTop: 15}}>
      <View>
         <Icon name='refresh' size={20} color='#ffffff' />
         <Text style={{fontSize: 16, color: '#ffffff', fontFamily: 'Quicksand-Medium'}}> Try Again</Text>
      </View>
    </TouchableOpacity>