Question

touchableopacity在脱机状态下不起作用，有时会花费很慢，例如在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使用： react-native-cli：2.0.1 反应本机：0.55.1

我试图将其更改为touchablewithoutfeedback，但还是一样

感谢您的帮助，

Answer 1

您将必须这样绑定您的函数。

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

Answer 2

我认为您应该只在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>

离线时touchableopacity不起作用

2 个答案: