touchableopacity не работает в автономном режиме

Question

touchableopacity не работает в автономном режиме, иногда это занимает очень медленно, как несколько минут, чтобы запустить на Press

<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>

я использую: Reaction-native-cli: 2.0.1 реактивный-родной: 0.55.1

я пытался перейти на touchable без обратной связи, но все равно

Спасибо за вашу помощь,

Answer 1

Я думаю, что вы должны использовать только один компонент внутри touchableOpacity, так что сделайте это:

 <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>

Answer 2

Вы должны будете связать свою функцию следующим образом.

<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>

или вы также можете связать свою функцию в конструкторе

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>

или как это

<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>